防重复点击

针对业务上的防重复点击,列出以下方法

节流

概念:每隔一段时间,只执行一次函数

节流有两种方法:

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') // 给节流函数传参
}

定义变量

直接定义一个变量,每次点击过后等所有操作结束后释放变量

以上的方法如果是对跳转页面、错误提示等常规点击操作可以有效作用

但是对于涉及到接口的数据请求却没有那么的见效,如果接口响应滞后时间较长甚至无响应,该方法不能完全达到防重复点击的效果,此时应该与后端进行沟通以进行服务端的防重操作

上一篇:【不定期更新】FPGA/IC岗位常见笔试面试题总结(基础知识)


下一篇:Vue——按钮防抖