/**
* 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景
* @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. springboot配置监听器、过滤器和拦截器

    监听器:listener是servlet规范中定义的一种特殊类.用于监听servletContext.HttpSession和servletRequest等域对象的创建和销毁事件.监听域对象的属性发生 ...

  2. Django--自定义 Command 命令

    Django 对于命令的添加有一套规范,你可以为每个app 指定命令.通俗一点讲,比如在使用manage.py文件执行命令的时候,可以自定制自己的命令,来实现命令的扩充. commands的创建 1. ...

  3. C# 常用验证

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  4. html和body的关系

    1.chrome浏览器 从上面数据我们可以看出,html作为body的容器,其大小就是我们可视窗口的大小,window.innerHeight与html的clientHeight相同即可验证. 同时, ...

  5. 2018.4.23-ml笔记(线性回归、梯度下降)

    线性回归:找到最合适的一条线来最好的拟合我们的数据点. hθ(x) = θixi=θTx    θ被称之为权重参数    θ0为拟合参数 对每个样本yi=θTxi + εi    误差ε是独立并且具有 ...

  6. 深度学习之PyTorch实战(2)——神经网络模型搭建和参数优化

    上一篇博客先搭建了基础环境,并熟悉了基础知识,本节基于此,再进行深一步的学习. 接下来看看如何基于PyTorch深度学习框架用简单快捷的方式搭建出复杂的神经网络模型,同时让模型参数的优化方法趋于高效. ...

  7. Python 判断文件/目录是否存在

    使用 os 模块 判断文件是否存在 os.path.isfile(path) 判断目录是否存在 os.path.isdir(path) 判断路径是否存在 # 使用 path 模块 os.path.ex ...

  8. WEB页获取串口数据

    最近做一个B/S的项目,需要读取电子秤的值,之前一直没做过,也没有经验,于是在网上找到很多  大致分两种 使用ActiveX控件,JS调用MSCOMM32.dll的串口控件对串口进行控制 使用C#语言 ...

  9. (转)分享一个技巧,利用批处理调用ruby脚本(可能你为路径苦恼)

    #关闭命令显示 @echo off #提示信息 echo Now,listing the controller,please not shutdown the DOS File! #切换到当前路径,. ...

  10. Extjs4.2+webAPI+EF实现分页以及webapi的数据传值(续)

    现在领导又要增加功能,需要分页的时候,每页显示N条信息.由于是每个页面都要改,所有需要声明了一个扩展类代码如下: // Copyright : 欧蓝德畅电子技术有限公司. All rights res ...