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

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

  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", "点我");            //更改按钮上的文字
时间: 2024-10-21 15:57:27

JS实现禁止短时间内连续触发事件的相关文章

JS对输入判断变化屏蔽中文输入法输入时连续触发事件的方法

<input type="text" onfocus="filter_time()" value="xxx" id="wd"> <script> var str = ''; var now = '' function filter_time() { var time = setInterval(filter_staff_from_exist, 100); $(this).bind('blur', fun

js 文本框值变化触发事件

jo.find(".price").bind('input onpropertychange', function () { me.calculate(jo); });

原生js自动触发事件

熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为,如点击(click)操作等. 标准使用dispatchEvent方法,IE6/7/8则使用fireEvent方法. dispatchEvent() 方法给节点分派一个合成事件. 语法如下: dispatchEvent(eventObj) eventObj 参数是一个描述事件的 ActionScrip

JS 页面加载触发事件 document.ready和onload的区别

JS 页面加载触发事件 document.ready和onload的区别 document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 1.Dom Ready 用jQ的人很多人都是这么开始写脚本的: $(function(){       // do something }); 例如: $(functi

html5与js关于input[type=&#39;text&#39;]文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick=&quot;select();&quot;。做购物车页面时会要用到。

关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="select();".做购物车页面时会要用到. input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange: 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次

UWP忽略短时间内重复触发的事件

原文:UWP忽略短时间内重复触发的事件 原链接:UWP忽略短时间内重复触发的事件 - 超威蓝火 做移动端开发的可能都会遇到这种需求,当用户点击一个按钮之后,由于没有异步,或者设备性能很差等等原因,程序卡住了.但是用户不知道是咋回事啊,就开始狂点按钮,结果请求很多次资源,或者构造了很多重复视图.安卓上有很多介绍如何忽略重复点击的情况,uwp里我好像还没找到,那接下来就说一说我的方法吧. 首先是官方最常用的,从Windows诞生之初用到现在的,点击按钮之后把他Disable掉,等完成了在Enable

JS触发事件大全

      事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠标时触发此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4.N4 鼠标移动时触发此事件 onmouseout IE4.N3 当鼠标离开某对象范围时触发此事件 onke

js 主动触发事件

//主动触发事件:触发鼠标被按下事件 var btn2 =document.getElementById("btn2"); var btn = document.getElementById("btn"); //步骤1:先创建1个事件 var evObj = document.createEvent("MouseEvents"); //步骤2:初始化这个event evObj.initEvent("click",true,tr

JS 实现 select中指定option选中触发事件(下拉框)

转自:http://www.cnblogs.com/moli-/p/6406170.html 在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. 想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件 又在select中添加onclick 这下可好了,没选option呢就触发了 当我们触发select的双击事件时,用ondb