防重复点击

本文主要是介绍防重复点击，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

节流

概念：每隔一段时间，只执行一次函数

节流有两种方法：

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

定义变量

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

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

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

这篇关于防重复点击的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！