js jquery中的延时方法(set/clearTimeout)
2017-01-04 14:03
253 查看
js jquery中的延时方法(set/clearTimeout)
起因:当一个标签同时拥有单击和双击事件时,为了区分开单双击事件,在双击事件中需要对单击事件进行延时,然后再清除单击事件。故而用到了setTimeout和clearTimeout方法,其中延时的时间的确定稍有不清楚的地方,故在此进行研究讨论。1. 首先来看个例子:
例一<html> <head> <script type="text/javascript" src="jquery-1.12.1.js"></script> </head> <body> <input type="button" id="testBtn" value="单击我或者双击我"> <script language="javascript"> var a = 0; $("#testBtn").on("click",function(){ console.log("this is click event"); console.log("a=" + a++); }); $("#testBtn").on("dblclick",function(){ console.log("this is dblclick event"); console.log("a=" + a++); }); </script> </body> </html>
双击时以上代码在浏览器控制台中的输出结果是:
this is click event a=0 this is click event a=1 this is dblclick event a=2
分析: 一次双击事件中会有多余的两次单击事件,需要将两次单击事件都清除才可以区分出双击事件。
清除方法的实例:
例二
<html> <head> <script type="text/javascript" src="jquery-1.12.1.js"></script> </head> <body> <input type="button" id="testBtn" value="单击我或者双击我"> <script language="javascript"> var a = 0; var timeoutID= null; $("#testBtn").on("click",function(){ clearTimeout(timeoutID); timeoutID= window.setTimeout(function(){ console.log("this is click event"); console.log("a=" + a++); }, 300); }); $("#testBtn").on("dblclick",function(){ clearTimeout(timeoutID); console.log("this is dblclick event"); console.log("a=" + a++); }); </script> </body> </html>
双击时以上代码在浏览器的控制台中的输出结果是:
this is dblclick event a=0
若将300改为0-100中任意数值,其输出结果是:
this is click event a=0 this is dblclick event a=1
结果分析:
1. 在添加延时后,双击事件中只有一次单击事件了(即使延时为0也如此);
2. 在添加延时大于300毫秒后,可以清除双击事件中的单击事件。
例三,原因分析。
<html> <head> <script type="text/javascript" src="jquery-1.12.1.js"></script> </head> <body> <input type="button" id="testBtn" value="单击我或者双击我"> <script language="javascript"> var a = 0; var timeoutID= null; $("#testBtn").on("click",function(){ clearTimeout(timeoutID); if(a!=0){ console.log("this is click 2 event"); console.log("a=" + a++); }else{ timeoutID= window.setTimeout(function(){ console.log("this is click event"); console.log("a=" + a++); }, 0); } }); $("#testBtn").on("dblclick",function(){ clearTimeout(timeoutID); console.log("this is dblclick event"); }); </script> </body> </html>
双击时以上代码在浏览器的控制台中的输出结果是:
this is click event a=0 this is click 2 event a=1 this is dblclick event a=2
结果分析:
1. 原因 : js是单线程执行的,setTimeout的执行时间会被添加到js线程的执行队列中进行排队,其执行时间由js引擎线程按顺序执行的队列来决定。参考文章:http://www.jb51.net/article/30362.htm
也就是说设置了setTimeout延迟后,它并不是立刻执行的,要在js的单线程队列中排队等待,那么setTimeout实际响应时间应该是,排队时间+设置的延迟时间。
例二中只出现一次click事件是因为:在第二次click事件中setTimeout 延时在js单线程队列中排在了dbclick事件之后,所以第二次click事件中的setTimeout延时被dbclick事件中的clearTimeout方法清除了。即: js单线程队列中第二次click事件后面紧跟的是dbclick事件,在第二次click事件中的setTimeout事件排在了dbclick事件之后。
2. 原因: 在添加延时大于300毫秒后,可以清除双击事件中的单击事件。说明第一次click事件到dbclick事件在js单线程队列中的排队时间间隔大概为300毫秒。即将单击事件的动作延迟300毫秒,即可在其发生前在dbclick中把它们清除掉。
结论:
由以上分析可知,要分离双击事件中的单击事件,就需要设置延时时间,这个延时时间需要大于第一次单击事件响应到双击事件响应的时间。
2. 补充例子:
在上上一篇文章 js中单击和双击事件的区分 中有研究过一个双击事件包含了以下过程:mousedown,mouseup,click,mousedown,mouseup,click,dblclick。
例四
<html> <head> <script type="text/javascript" src="jquery-1.12.1.js"></script> </head> <body> <input type="button" id="testBtn" value="单击我或者双击我"> <script language="javascript"> var a = 0; var timeoutID= null; $("#testBtn").on("mousedown",function(){ console.log("this is mousedown event"); console.log("a=" + a++); }); $("#testBtn").on("mouseup",function(){ console.log("this is mouseup event"); console.log("a=" + a++); }); $("#testBtn").on("click",function(){ clearTimeout(timeoutID); timeoutID= window.setTimeout(function(){ console.log("this is click event"); console.log("a=" + a++); }, 100); }); $("#testBtn").on("dblclick",function(){ clearTimeout(timeoutID); console.log("this is dblclick event"); console.log("a=" + a++); }); </script> </body> </html>
在浏览器控制台的输出结果是:
this is mousedown event a=0 this is mouseup event a=1 this is mousedown event a=2 this is click event a=3 this is mouseup event a=4 this is dblclick event a=5
分析: 说明第一次click事件到第二次mousedown的时间间隔大约是100毫秒。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 只需四个步骤几行代码,即可快速实现直播弹幕功能
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- javascript实现10进制转为N进制数
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 基础、进阶以及 Ubuntu 系统中的 JavaScript 开发调试工具
- 最后一次说说闭包
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究