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. WebService 学习记录

    -------------------------------------------PS:这个WebService 服务必须一直开着,关闭就没法访问了 Web Service 教程 一.webser ...

  2. 使用sync 修饰符------子组件内部可以修改props

    首先看一个需求,外部点击一个按钮,让弹窗组件显示(也就是将弹窗组件显示的flag置为true),点击弹窗组件内部的某个按钮 ,让改props置为false,关闭弹窗,但是会报警告,因为内层组件不能修改 ...

  3. C++中的抽象类

    一.抽象类学习笔记 1.virtual修饰函数(虚函数)后面加=0就称为一个纯虚函数,一个类中只要有纯虚函数那么它就是一个抽象类.抽象类不能用来实例化对象,是用来给他的派生类定义好这些框架的,给使用这 ...

  4. skipper prometheus 监控

    skipper 是支持prometheus监控的,只是没有启用,需要添加参数 -enable-prometheus-metrics 测试使用的是一个简单nginx web ,同时使用docker-co ...

  5. lch 儿童围棋课堂 启蒙篇 (李昌镐 著)

    第1章 了解围棋 第2章 无气不活 棋子的"气"第3章 有目数才能赢空第4章 常用术语第5章 吃子第6章 死活:眼第7章 死活:典型棋形第8章 布局:术语篇 第1章 了解围棋 (已 ...

  6. 【LAYABOX】轴心点和锚点

    https://blog.csdn.net/RuoYeKnight/article/details/77947288 轴心点和锚点是一个概念,都是基准点,决定了图片在舞台的位置, 简单地说,若对spr ...

  7. Python __name__变量

    原文: http://blog.csdn.net/u011511601/article/details/53504355 Python使用缩进对齐组织代码的执行,所有没有缩进的代码,都会在载入时自动执 ...

  8. mysql创建部分索引

    mysql中,字符串如何建立索引的(本文中截取一部分) 只对字符串的前几个字符进行索引.通过字符串的前几个字符我们已经能大概排序字符串了,剩下不能排序的可以通过遍历进行查找啊,这样只在B+树中存储字符 ...

  9. Spring BeanFactory与FactoryBean的区别及其各自的详细介绍于用法

    Spring BeanFactory与FactoryBean的区别及其各自的详细介绍于用法 1. BeanFactory BeanFactory,以Factory结尾,表示它是一个工厂类(接口),用于 ...

  10. docker 的前台模式和后台模式

    Detached(后台模式) vs foreground(前台模式) 当我们启动一个容器时,首先需要确定这个容器是运行在前台还是运行在后台. -d, --detach Run container in ...