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. hdu4338 Simple Path

    Everybody knows that totalfrank has absolutely no sense of direction. Getting lost in the university ...

  2. 创建新用户，及用新用户名和密码登录--------------DCL

    创建用户基本语法:    creat user 用户名@"ip地址" identified by "密码" 登录数据库以后:用show databases; 显 ...

  3. @PropertySouce注解

    1.@ProtertySource @PropertySouce是spring3.1开始引入的基于java config的注解. 通过@PropertySource注解将properties配置文件中 ...

  4. 05基于python玩转人工智能最火框架之TensorFlow基础知识

    从helloworld开始 mkdir mooc # 新建一个mooc文件夹 cd mooc mkdir 1.helloworld # 新建一个helloworld文件夹 cd 1.helloworl ...

  5. jsp与servlet的区别与联系

    jsp和servlet的区别和联系:1.jsp经编译后就变成了Servlet.(JSP的本质就是Servlet,JVM只能识别java的类,不能识别JSP的代码,Web容器将JSP的代码编译成JVM能 ...

  6. 曾经很强大的免费 ERP 2BizBox

    曾经很强大的免费 ERP 2BizBox 整个功能很强大,特别是生产,工单也很完善,有损耗,有反冲等功能. 流程比较规矩,需要先采购后才能使用,只有生产后才能销售,工单有组装和拆装,工程有工程更改,也 ...

  7. 持续集成--Jenkins--2

    安装sonar Scanner 打开http://www.sonarqube.org/官网 找到下面扫描器 通过这个扫描器可以分析代码分析 因此你也的安装这个扫描器 上传sonar-scanner-2 ...

  8. ThreadLocal使用注意

    ThreadLocal<T>的出现是一种空间换时间的思想的运用,是为了多线程环境下单线程内变量共享的问题.它的原理就是每个线程通过ThreadLocal.ThreadLocalMap,保存 ...

  9. npx：npm包执行器

    npx 作用: 单次执行命令而不需要安装到本机 执行依赖包里的二进制文件 使用不同版本的 node 利用 npx 可以下载模块这个特点,可以指定某个版本的 Node 运行脚本.它的窍门就是使用 npm ...

  10. range— 建立一个包含指定范围单元的数组 (數字、字母)

    range()函数快速创建从1到12的数字数组 $numbers=range(0,12); echo '<pre>'; print_r($numbers); echo '</pre& ...