/**
* 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景
* @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. Linux学习笔记之九————ubuntu软件安装与卸载

    一.更新 源 1. 寻找国内镜像源 所谓的镜像源:可以理解为提供下载软件的地方,比如Android手机上可以下载软件的91手机助手:iOS手机上可以下载软件的AppStore 2. 备份Ubuntu默 ...

  2. CentOS7安装tyk(内部部署)

    CentOS7安装tyk(内部部署) 参考 官方文档 github 环境准备 #确保端口3000处于打开状态:Dashboard使用该端口来提供GUI和Developer Portal #Tyk需要P ...

  3. Git 强制回退到某个历史版本再推送到远程

    1. 使用 git log 命令历史版本记录回退版本 git reset --hard f6a7c803a6931a9eca011d4e097389e0845cbe49 2. 推送到远程 git pu ...

  4. 从零开始学 Web 之 ES6(四)ES6基础语法二

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

  5. Hadoop2源码分析-YARN 的服务库和事件库

    1.概述 在<Hadoop2源码分析-YARN RPC 示例介绍>一文当中,给大家介绍了YARN 的 RPC 机制,以及相关代码的演示,今天我们继续去学习 YARN 的服务库和事件库,分享 ...

  6. 高可用Hadoop平台-应用JAR部署

    1.概述 今天在观察集群时,发现NN节点的负载过高,虽然对NN节点的资源进行了调整,同时对NN节点上的应用程序进行重新打包调整,负载问题暂时得到缓解.但是,我想了想,这样也不是长久之计.通过这个问题, ...

  7. Spring Boot + Spring Cloud 构建微服务系统(二):服务消费和负载(Ribbon)

    使用RestTemplate调用服务 在上一篇教程中,我们是这样调用服务的,先通过 LoadBalancerClient 选取出对应的服务,然后使用 RestTemplate 进行远程调用. Load ...

  8. 深入JAVA注解(Annotation):自定义注解 (转)

    原文出自:http://blog.csdn.net/yjclsx/article/details/52101922 一.基础知识:元注解 要深入学习注解,我们就必须能定义自己的注解,并使用注解,在定义 ...

  9. NIO ServerSocketChannel ScoketChannel

    package com.yb.nio; import java.io.IOException; import java.net.InetSocketAddress; import java.net.S ...

  10. 进程间通信IPC-管道

    管道是UNIX系统IPC的最古老的形式,所有的UNIX系统都提供此通讯机制.管道有以下两种局限性: 1, 历史上,它们是半双工的(即数据只能在一个方向上流动).现在某些系统提供了全双工管道,但是为了最 ...