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. Windows 清理磁盘

    ====手动清理C盘(开始\运行\cleanmgr,选择C盘...)或者如下右键C盘,选择属性,点击通用页签下方[磁盘清理]按钮.磁盘清理界面,中间部分可以选择要清理的项目,可以全选.然后点击下方的清 ...

  2. 裴(pei)蜀定理 知识点

    在数论中,裴蜀定理是一个关于最大公约数(或最大公约式)的定理.裴蜀定理得名于法国数学家艾蒂安·裴蜀,说明了对任何整数a.b和它们的最大公约数d,关于未知数x和y的线性丢番图方程(称为裴蜀等式): ax ...

  3. Python知识点整理，基础2 - 列表操作

  4. mysql深入

    使用存储过程 create procedure productpricing() begin select avg(prod_price) as priceaverage from products; ...

  5. Java中的权限学习笔记

    1.Java中的权限有两个层次,一个是类这一层,另一个是类成员那一层. 类这一层: public class可以在本包内被访问,也可以在包外被访问.而没有被public修饰的class只能在本包内被调 ...

  6. mysqldump命令之常用模板

    ##=====================================================## ## 在Master上导出所有数据库 /export/servers/mysql/b ...

  7. numpy 笔记

    1  矩阵.数组.列表 #from numpy import * import numpy as np 矩阵创建 >>> A = np.array([1,2,3]) array([1 ...

  8. python中a, b = a, a + b

    python中a, b = a, a + b a = 0 b = 1 计算a, b = a, a + b,先计算赋值号右边的部分,即 a = 0, a + b = 0+1=1,然后再赋值给左边 也可以 ...

  9. elasticsearch 基础 语法总结

    1. es 使用 restful 风格的 api 备注: es 的 api  格式  基本是这个样     请求方式    /索引名/文档名/id?参数   ,但是 还有 很多不是这样的 请求,比如 ...

  10. mysql重复start stop slave测试

    如题,测试重复start slave, stop slave是否会有报错. 版本 5.7.21 重复start slave测试 第一次start >start slave; Query OK, ...