js节流函数和js防止重复提交的N种方法
时间:2022-06-02
本文章向大家介绍js节流函数和js防止重复提交的N种方法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
应用情景
经典使用情景:js的一些事件,比如:onresize、scroll、mousemove、mousehover等;
还比如:手抖、手误、服务器没有响应之前的重复点击;
这些都是没有意义的,重复的无效的操作,设置对整个系统的影响还可能是致命的,所以我们要对重复点击的事件进行相应的处理!
节流函数
所谓的节流函数顾名思义,就是某个时刻限制函数的重复调用。
同样节流函数也是为了解决函数重复提交的问题,而防止重复提交的方法,不止节流函数一种实现。
方法汇总
本文整理了我在工作实践当中,觉的防止js重复提交,比较好用的方法,在这里和大家分享一下。
一、setTimeout + clearTimeout(节流函数)
本文提供两种实现方式:普通节流函数和闭包节流函数
二、设定flag/js加锁
三、通过disable
四、添加浮层比如loading图层防止多次点击
具体实现
一、setTimeout + clearTimeout(节流函数)
方式一:闭包节流函数(可传递多个参数)
/**
* 闭包节流函数方法(可传参数)
* @param Function fn 延时调用函数
* @param Number delay 延迟多长时间
* @return Function 延迟执行的方法
*/
var throttle = function (fn, delay) {
var timer = null;
return function () {
var args = arguments; //参数集合
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(this, args);
}, delay);
}
}
/**
* 要执行的方法
* @param String name 传递的参数
*/
function postFun(name) {
document.writeln("名字:" + name);
}
//================测试部分 => 【1s重复点击10次】
var t = throttle(postFun, 1000);
var ejector = setInterval(() => {
t("tiger");
}, 100);
setTimeout(() => {
clearInterval(ejector);
}, 1000);
执行结果:
方式二:普通节流函数方法
/**
* 普通节流函数方法
* @param Function fn 延时调用函数
* @param Number delay 延迟多长时间
*/
function throttle(fn, delay) {
if (fn._id) {
clearTimeout(fn._id);
}
fn._id = window.setTimeout(() => {
fn();
fn._id = null;
}, delay);
}
/**
* 要执行的方法
*/
function postFun() {
document.writeln(new Date().getTime());
}
//================测试部分 => 【1s重复点击10次】
var interval = setInterval(() => {
throttle(postFun, 1000);
}, 100);
setTimeout(() => {
clearInterval(interval);
}, 1000);
执行结果:
二、设定flag/js加锁
var lock = false;
jQuery("#submit").on('click', function () {
if (lock) {
return false;
}
jQuery.post(url, data, function (response) {
//TODO:业务代码
lock = false;
});
});
总结
前两种方式实现起来比较方便,而后两种实现起来相对比较繁琐,如果是为了防止事件的多次触发,建议使用闭包,如果是表单提交,适度使用后两种比较稳妥。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Windows系统组件漏洞
- 【风险通告】FastAdmin会员中心Getshell漏洞
- Azure Cosmos DB介绍及演示
- 从一次编译出发梳理概念: Jetty,Jersey,hk2,glassFish,Javax,Jakarta
- 《一起学sentinel》一、一起搭建sentinel服务
- InfluxDB和Grafana实现传感器数据的存储和可视化
- 样本相关性分析
- Android 序列化 Serializable与Parcelable
- 《一起学sentinel》二、初探sentinel的Slot
- Redis突然报错,今晚又不能回家了...
- 查询ElasticSearch:用SQL代替DSL
- Java开源框架中的设计模式以及应用场景
- 统一定制API返回格式,我只做了这几件事
- 《一起学sentinel》三、Slot的子类及实现之NodeSelectorSlot和ClusterBuilderSlot
- 《一起学sentinel》四、Slot的子类及实现之LogSlot和StatisticSlot