针对业务上的防重复点击,列出以下方法
节流
概念:每隔一段时间,只执行一次函数
节流有两种方法:
1.setTimeout计时器
// 该方法采用的是setTimeout
function throttle(fn, delay) {
var timer;
return function () {
var _this = this;
var args = arguments;
if (timer) {
return;
}
timer = setTimeout(function () {
fn.apply(_this, args);
timer = null; // 在delay后执行完fn之后清空timer,此时timer为假,throttle触发可以进入计时器
}, delay)
}
}
2.时间戳
function throttle(fn, delay) {
var previous = 0;
// 使用闭包返回一个函数并且用到闭包函数外面的变量previous
return function() {
var _this = this;
var args = arguments;
var now = new Date();
if(now - previous > delay) {
fn.apply(_this, args);
previous = now;
}
}
}
function testThrottle(e, content) {
console.log(e, content)
}
let testThrottleFn = throttle(testThrottle, 1000)
document.onmousemove = function (e) {
testThrottleFn(e, 'throttle') // 给节流函数传参
}
定义变量
直接定义一个变量,每次点击过后等所有操作结束后释放变量
以上的方法如果是对跳转页面、错误提示等常规点击操作可以有效作用
但是对于涉及到接口的数据请求却没有那么的见效,如果接口响应滞后时间较长甚至无响应,该方法不能完全达到防重复点击的效果,此时应该与后端进行沟通以进行服务端的防重操作