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. djkstra nlogn

    #include<bits/stdc++.h> #define fi first #define se second #define pii pair<int,int> usi ...

  2. Go Example--通道选择器

    package main import ( "fmt" "time" ) func main() { c1 := make(chan string) c2 := ...

  3. python-xlsxwriter模块绘制表格

    #coding: utf-8 import xlsxwriter workbook=xlsxwriter.Workbook('chart.xlsx') worksheet=workbook.add_w ...

  4. MySQL Lock--INSERT加锁规则

    Insert操作加锁规则 1.INSERT操作会对新插入的记录加行锁(ROW LOCK)+排他锁(X LOCK),不会产生任何GAP锁和Next-Key锁 2.在插入记录前,会向插入记录所在位置申请意 ...

  5. str_replace中的匹配空白符，必须用双引号

    例: $minUnit = str_replace(array('\r','\n'),"",$content); 执行上面的语句,你会发现,文本没有任何变化,该换行的地方还是换行. ...

  6. oracle-scn

    在2012年第一季度的CPU补丁中,包含了一个关于SCN修正的重要变更,这个补丁提示,在异常情况下,Oracle的SCN可能出现异常增长,使得数据库的一切事务停止,由于SCN不能后退,所以数据库必须重 ...

  7. day 32 管道 事件 信号量 进程池

    一.管道(多个时数据不安全)   Pipe 类 (像队列一样,数据只能取走一次) conn1,conn2 = Pipe()     建立管道 .send()   发送 .recv()   接收 二.事 ...

  8. ML（1）——机器学习简述

    简述 机器学习是人工智能的一种实现方式:深度学习是一种实现机器学习的技术,或者说是一种特殊的机器学习方法,可以说广义上的机器学习也包括了深度学习,三者的关系如下图所示: 从判别垃圾邮件到无人驾驶技术, ...

  9. vue-router 与 react-router 设计理念上的区别

    vue-router 与 react-router 设计理念上的区别: 区别 vue-router react-router 改成history mode: 'history' 直接使用 react- ...

  10. dashboard无法查到endpoint, counter

    问题 使用Open-falcon时,Agent 推送metrics后,无法在Dashboard上显示.将Agent的hostname 修改后,却可以. 解决办法 查看Agent log,推送到tran ...