[HTML/JS]模拟加锁防止重复点击

/ 25,525评论 / 65807阅读 / 0点赞

由于用户的网络环境等各种原因,防止按钮重复点击,表单重复提交等都是减少bug发生,降低服务器压力等相当有效的方法。下面来聊聊通过模拟我们在操作系统里类似加锁的思想来防止重复点击。

思路


示例

<div style="width:100%;display:flex;justify-content: center;background:#66ccff;border-radius:10px;border 1px solid #66ccff;">
    <button onclick="btn_click()" style="border-radius:10px;">
        点死我
    </button>
</div>


<script>
//锁变量
let lock = true;
//按钮点击执行函数
function btn_click() {
    if(lock == false) { 
        return;
    }
    //加锁
    lock = false;
    //执行按钮点击本应执行的事情
    alert("点了一下我捏");
    //限制间隔5000毫秒(即5秒)只能执行一次
    setTimeout(function(){
        //解锁
        lock = true;
    },5000);
}
</script>

结语

  1. TracyFoome说道:

    comprare farmaci online all’estero: cialis generico consegna 48 ore – acquistare farmaci senza ricetta

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注