JavaScript防止按钮重复点击的两种实现方案

作者：青柠

时间：2026-10-30

本文详细介绍在JavaScript中防止按钮在短时间内被重复点击的两种常见思路。第一种方案通过点击后解绑事件并设置定时器重新绑定来实现；第二种方案利用时间戳记录上次点击时间，通过判断间隔是否大于设定值来限制操作。两种方法均能有效避免用户误操作导致的重复请求或状态异常。

文章目录

防止按钮重复点击的背景与需求

前言

曾有一次在博客园首页频繁点击刷新博文列表按钮，导致IP被临时封禁，不得不重启路由器更换IP才能恢复访问。为了避免此类因快速重复点击引发的限制，探讨一种在限定时间（如1秒）内防止按钮被重复点击的机制显得尤为必要。

方案一：事件解绑与重绑实现

方案一：事件解绑与重绑

最直观的做法是，在按钮点击事件触发后，立即解除该按钮的事件绑定函数，并在指定时间（例如1秒）后重新绑定该函数。


<button id="btn">0</button>
<script>
btn.onclick = function add(){
  btn.innerHTML = Number(btn.innerHTML) + 1;  
  btn.onclick = null;
  clearTimeout(timer);
  var timer = setTimeout(function(){
    btn.onclick = add;
    },1000);  
}
</script>

防止按钮重复点击的背景与需求

方案二：基于时间戳的点击频率控制

方案二：时间戳校验

另一种思路是获取并记录当前时间，当用户再次点击时，计算当前时间与上次点击时间的差值，只有当时间间隔大于设定值（如1秒）时才执行有效操作。


<button id="btn">0</button>
<script>
btn.onclick = (function(){
  var last = Date.now();
  return function(){
    var now = Date.now();
    if((now - last)>1000){
      btn.innerHTML= Number(btn.innerHTML) + 1;      
    }
    last = now;
  }
})();
</script>

防止按钮重复点击的背景与需求