/**
* 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景
* @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. Tomcat使用IDEA远程Debug调试

    Tomcat运行环境:CentOS6.5.Tomcat7.0.IDEA 远程Tomcat设置 1.在tomcat/bin下的catalina.sh上边添加下边的一段设置 CATALINA_OPTS=& ...

  2. Linux学习笔记之十————Linux常用服务器构建之ftp服务器

    p服务器介绍 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”. 用于Internet上的控制文件的双向传输. 同时,它也是一个应用程序(Ap ...

  3. 高手速成android开源项目【tool篇】

    主要包括那些不错的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 一.依赖注入DI 通过依赖注入减少Vie ...

  4. mongodb数据库添加权限及简单数据库命令操作笔记

    加固mongodb建议:修改数据库默认端口,添加数据库访问权限: 启动数据库(裸奔):C:\mongodb\bin>mongod --dbpath C:\MongoDB\data(同时用--db ...

  5. 在mpvue中使用map如何避坑

    最近在做一个需求,当用户放大地图到某个级别时,自动显示marker的callout标签,当小于这个缩放级别时,则隐藏callout.然而在我实现的过程中,却发现一个严重的问题:当我操作marker数据 ...

  6. 与LINQ有关的语言特性

    在说LINQ之前必须先说说几个重要的C#语言特性 一:与LINQ有关的语言特性 1.隐式类型 (1)源起 在隐式类型出现之前, 我们在声明一个变量的时候, 总是要为一个变量指定他的类型 甚至在fore ...

  7. GO入门——6. struct与方法

    1 struct Go 中的struct与C中的struct非常相似,并且Go没有class 使用 type struct{} 定义结构,名称遵循可见性规则 支持指向自身的指针类型成员 支持匿名结构, ...

  8. 安装和配置jBPM4,并举个hello.w

    至于网上很复杂,但又不懂的插件,我们先不鸟他. myeclipse8\dropins这里就是给我们放插件的,类似SVN之类的.所以小生也修改了下,共享了下.只有放在目录下,打开应该可以的.下面是链接. ...

  9. 从零开始学 Web 之 JS 高级(二)原型链,原型的继承

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

  10. 一张 JVM 相关的思维脑图(4.4M)

    楼主学习 JVM 总结的知识点,用思维脑图串起来,温故而知新,其中含有类加载器,内存布局,GC(右侧). 最多的就是 GC 的内容了. 内容有错误之处,还请指正. 大图地址