防止多次点击按钮-＞ js

下课别走～

已于 2022-10-22 14:35:38 修改

阅读量900

点赞数 1

分类专栏：前端文章标签： javascript java 开发语言

于 2022-10-19 14:23:36 首次发布

本文链接：https://blog.csdn.net/weixin_51730356/article/details/127406915

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

工作记录-->防止按钮被多次点击，原理如下:

1.首先进入应用就将btnBefore赋值为0，2.然后再点击按钮触发函数中获取当前时间戳btnNow，3.判断btnNow - btnBefore 小于等于1秒之内判定return掉，并将当前时间戳作为下次按键时间戳。具体代码如下

var btnTimer = null; // 1.定义一个节流阀
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
    // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足100ms
    if(btnTimer) {
        return;
    }
    btnTimer = setTimeout(function() {
        // 事件操作部分省略
        ...

        btnTimer = null; // 2.清空节流阀，方便下次开启定时器
    }, 700)
})