JS实现禁止短时间内连续触发事件

最新推荐文章于 2024-10-12 16:38:05 发布

转载最新推荐文章于 2024-10-12 16:38:05 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Apply-fly/p/7203119.html

文章标签：

#前端 #javascript #ViewUI

本文介绍了一种防止按钮被连续点击的技术方案，通过设置定时器并在每次点击时清除上一次的定时器来避免短时间内多次触发同一事件。此外还提供了一种通过修改按钮状态来阻止连续点击的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置定时器，每次进入函数时先清空定时器，然后在执行

  let c =null;
  let dom = document.querySelector('#me');
  dom.addEventListener('click',function(){
    clearTimeout(c);
    c = setTimeout(function(){
      console.log(2000)
    },1000)
  },false)

如果是一个按钮的话，可以使用一下方法

1       var clickflag = 0;  
2        $('.btn').click(function () {  
3                 if (clickflag == 0) {  
4                     clickflag = 1;  
5                     $(this).addClass("c_gray");  
6                     setTimeout(function () { clickflag = 0 }, 1000);  
7                 }  
8             });

同时按钮事件也可以使用添加属性的方法来解决连续触发

1 $("#btn").attr("disabled", "disabled");  //使按钮不能被点击 
2 $("#btn").attr("value", "wait");              //更改按钮上的文字 
3 
4 $("#btn").removeAttr("disabled");       //使按钮能够被点击 
5 $("#btn").attr("value", "点我");            //更改按钮上的文字