js多次触发事件，在一定延迟内只执行一次的案例：

　　　　<!DOCTYPE html>
　　　　<html>
　　　　　　<head>
　　　　　　　　<meta charset="UTF-8">
　　　　　　　　<title></title>
　　　　　　　　<style>
　　　　　　　　　　.div{
　　　　　　　　　　　　width:200px;
　　　　　　　　　　　　height:200px;
　　　　　　　　　　　　background:red;
　　　　　　　　　　　　transition:width 2s linear 0s;
　　　　　　　　　　}
　　　　　　　　</style>
　　　　　　</head>
　　　　　　<body>
　　　　　　　　<div class="div"></div>
　　　　　　</body>
　　　　</html>
　　　　<script>
　　　　　　var div=document.querySelectorAll(".div")[0];
　　　　　　var num=0;
　　　　　　var t=null;
　　　　　　//事件累加的功能
　　　　　　//js 多次触发点击事件,在一定延迟内只执行一次
　　　　　　div.onclick=function(){
　　　　　　　　if(t!=null){
　　　　　　　　　　clearTimeout(t)
　　　　　　　　}
　　　　　　　　t=setTimeout(function(){
　　　　　　　　　　num++;
　　　　　　　　　　console.log(num);
　　　　　　　　},500)
　　　　　　}

　　　　</script>

js多次触发事件，在一定延迟内只执行一次 （事件累加）的更多相关文章

  1. vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...

  2. JQuery触发hover事件无效时使用js原生的触发事件方法

    需求:在开发一个从微信公众号后台管理网页上爬取数据的chrome插件时,有部分页面元素是只显示了部分摘要信息的,需要把鼠标移上去后才能显示全部信息(类似title的弹出显示).这就需要在chrome插 ...

  3. fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

    之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...

  4. 分享一个移动项目中消除click事件点击延迟的方法

    对于前端工程师来说,apicloud无疑给我们提供了很好的平台,有各种各样的模块供我们使用,但是在实际项目的时候,很大部分的代码,还是需要我们用html css js来实现的.但是呢,移动端页面对于c ...

  5. JS Event事件流（冒泡机制、捕获机制、事件绑定）

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

  6. javascript创建css、js，onload触发callback兼容主流浏览器的实现

    http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.c ...

  7. 在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件

    在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件  当触发事件时候 会把当前的dom传给该方法

  8. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  9. js立即执行函数应用--事件绑定

    js中立即执行函数的应用:应用到事件绑定上. 少说多做,直接运行代码(代码中有注释): <!DOCTYPE html> <html lang="zh"> & ...

随机推荐

  1. 《DSP using MATLAB》Problem 5.22

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% O ...

  2. Connect模块解析 转载

    来自对<了不起的Node.js>一书的学习ConnectNode.js为常规的网络应用提供了基本的API.然而,实际情况下,绝大部分网络应用都需要完成一系列类似的操作,这些类似的操作你一定 ...

  3. 思科模拟器——允许远程telnet连接控制路由器/交换机

    环境如下: 路由器配置如下.interface f0/0 配置该端口,ip address 192.168.1.1 255.255.255.0 配置ip,no shut激活,line vty 0 4 ...

  4. IntelliJ IDEA 快捷键说明大全（中英对照、带图示详解）

    因为觉得网络上的 idea 快捷键不够详尽,所以特别编写了此篇文章,方便大家使用 idea O(∩_∩)O~ 其中的英文说明来自于 idea 的官网资料,中文说明主要来自于自己的领会和理解,英文说明只 ...

  5. Spring定时器corn表达式详解

    1.结构 Spring定时器corn表达式详解 2.各字段的含义 字段 允许值 允许的特殊字符 秒 0~59 - * / 分 0~59 - * / 小时 0~23 - * / 日期 1~31 - * ...

  6. drone secret 使用

      drone 的secret 可以让我们方便的对于需要保密的信息的隐藏,减少账户信息的泄密 环境准备 docker-compose 文件 version: '3' services: drone-s ...

  7. JMeter 各组件介绍以及用法

    录制脚本 常用组件 参数化 关联

  8. 深入详解美团点评CAT跨语言服务监控（七）消息分析器与报表(二)

    CrossAnalyzer-调用链分析 在分布式环境中,应用是运行在独立的进程中的,有可能是不同的机器,或者不同的服务器进程.那么他们如果想要彼此联系在一起,形成一个调用链,在Cat中,CrossAn ...

  9. ML（附录3）——过拟合与欠拟合

    过拟合与欠拟合 我们希望机器学习得到好的模型,该模型能够从训练样本中找到一个能够适应潜在样本的普遍规律.然而,如果机器学习学的“太好”了,以至把样本的自身特点当作潜在样本的一般特性,这就使得模型的泛化 ...

  10. 与左侧的 圆括号“(”(位于“e:\大二上课程课件、作业和答案\数据结构\chapter4\sqstack\sqstack\mysqstack.h(23)”)匹配之前遇到文件结束

    错误原因是“某对圆括号只打了左括号而没有右括号”,debug方法是:直接根据报错提示:“与左侧的 圆括号“(”(位于“e:\大二上课程课件.作业和答案\数据结构\chapter4\sqstack\sq ...