如何防止按钮被频繁点击

如何防止按钮被频繁点击，有两个控制锁。

第一个就是要等被调用响应后才能再次按下

第二个就是时间，距离上次点击不能小于某个设定时间

具体示例如下：

<html>
    <head></head>
    <body>
        <div>
            <input type="button" id="btn1" value="点击" />
        </div>
        <div>
            <span id="shower"></span>
        </div>
    </body>
</html>

<script>
    let couter=0;
    let timeLock=1000; //1秒
    let taskLock=true; //开始是可以点击
    document.getElementById("btn1").onclick=()=>{
        if (!taskLock) {
            console.log("系统正在处理中，请不要频繁点击！");
            return;
        }

        taskLock=false;       

        setTimeout(() => { //模拟操作时长，假设要500毫秒才能执行完成，在未完成前再次点击触发警告
            couter  ;
            document.getElementById("shower").innerText="计数：" couter;

            setTimeout(() => {
                taskLock=true; //虽然任务完成了，但时间未到，仍然会有警告
            }, timeLock); //第二重时间限制
            
        }, 500);
    }
</script>

如何防止按钮被频繁点击

发表评论