/**
* 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景
* @param {String} domID 要添加事件的控件ID
* @param {String} eventName 要添加的事件, 例如: click, dblclick, 不可写成onclick, ondblclick
* @param {Function} callback 触发事件所要执行的函数, 对于有参数的函数, 需要包含在一个匿名函数中, 匿名函数中是对目标函数的调用, 对于无参数函数, 直接传目标函数名称即可
* @param {Number} interval 事件的时间间隔, Number类型或String类型的数字皆可
*/
function addLimitedEvent( domID, eventName, callback, interval ) {
  var _dom = document.getElementById( domID );

  if ( Number.isNaN( Number.parseInt( interval ) ) )
    interval = 1;
  else
    interval = Number.parseInt( interval );

  if ( _dom.addEventListener )
    _dom.addEventListener( eventName, removeLimitedEvent );
  else
    _dom.attachEvent( 'on' + eventName, removeLimitedEvent );

  function removeLimitedEvent() {
    callback();

    if ( _dom.removeEventListener )
      _dom.removeEventListener( eventName, removeLimitedEvent );
    else
      _dom.detachEvent( 'on' + eventName, removeLimitedEvent );

    setTimeout( function () {
      addLimitedEvent( domID, eventName, callback );
    }, interval * 1000 );
  }
}

/*函数使用方法*/

addLimitedEvent('btn_Test','click',function(){handler('a','b')},1);

addLimitedEvent('btn_Test','click',handler,1);

javascript避免dom事件重复触发的更多相关文章

  1. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

  2. 前端笔记之JavaScript(十)深入JavaScript节点&DOM&事件

    一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript ...

  3. javascript:理解DOM事件

    首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. ​标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. DOM ...

  4. JavaScript基础—dom,事件

    Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...

  5. 前端JavaScript之DOM事件操作

    DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...

  6. 【总结整理】JavaScript的DOM事件学习(慕课网)

    事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件 来实现 比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换 本章内容1.理解事件 ...

  7. 松软科技web教程:JavaScript HTML DOM 事件监听器

    addEventListener() 方法 实例 添加当用户点击按钮时触发的事件监听器: document.getElementById("myBtn").addEventList ...

  8. javascript将DOM事件处理程序封装为event.js 出现的低级错误记录

    将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEve ...

  9. JavaScript DOM事件模型

    早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...

随机推荐

  1. Eclipse常用注释设置

    菜单:Window→Preferences→Java→Code Style→Code Template Files /** * @Title: ${file_name} * @Package ${pa ...

  2. ACM学习大纲

    1 推荐题库 •http://ace.delos.com/usaco/ 美国的OI 题库,如果是刚入门的新手,可以尝试先把它刷通,能够学到几乎全部的基础算法极其优化,全部的题解及标程还有题目翻译可以b ...

  3. 从零开始学 Web 之 移动Web(八)Less

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. [深度学习] 最全优化方法总结比较--SGD,Adagrad,Adadelta,Adam,Adamax,Nadam

    SGD 此处的SGD指mini-batch gradient descent,关于batch gradient descent, stochastic gradient descent, 以及 min ...

  5. Nginx反向代理上传大文件报错(failed to load resource : net :: ERR_CONNECTION_RESET)

    转自: https://blog.csdn.net/kinginblue/article/details/50753271?locationNum=14&fps=1 Nginx反向代理上传大文 ...

  6. docker私有仓库-https+nginx

    一.概述 使用的是registry-2.4版本,因为在这个版本开始提供了garbage-collect,能够清理掉blobs,2.1开始提供了api的删除功能,但是只是删除的index并没有释放掉磁盘 ...

  7. Rails/ActiveRecord order by Array

    ActiveRecord中如果想根据自定义的一个数组id集合排序: ids = [2,1,3] users = User.where("id in (?)",ids) result ...

  8. 利用Redis发布订阅完成tomcat集群下的消息通知

    以下为个人想法,如果有说的不对的地方请各位大佬见谅! 这是博主的第一篇博客,可能排版以及一些描述有不合理的地方还请勿喷,希望大家尽可能的多给我这样的新人一些鼓励让我能在写博客的道路上走下去. 进入正题 ...

  9. [LeetCode解题报告] 502. IPO

    题目描述 假设 LeetCode 即将开始其 IPO.为了以更高的价格将股票卖给风险投资公司,LeetCode希望在 IPO 之前开展一些项目以增加其资本. 由于资源有限,它只能在 IPO 之前完成最 ...

  10. Mini2440 通过 SPI 操作 OLED (裸板下使用 SPI 控制器)

    在裸板下使用 SPI 的话,有两种方法可选: 使用 IO 口模拟 SPI 进行操作 使用 SPI 控制器进行操作 这里我们选用控制器的方式,简单方便. 初始化 SPI static void SPIC ...