js jquery中的延时方法（set/clearTimeout）

来源：互联网发布：2016网络新词日语编辑：程序博客网时间：2024/05/18 11:45

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 eventa=0this is click eventa=1this is dblclick eventa=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 eventa=0

若将300改为0-100中任意数值，其输出结果是：

this is click eventa=0this is dblclick eventa=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 eventa=0this is click 2 eventa=1this is dblclick eventa=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 eventa=0this is mouseup eventa=1this is mousedown eventa=2this is click eventa=3this is mouseup eventa=4this is dblclick eventa=5

分析：说明第一次click事件到第二次mousedown的时间间隔大约是100毫秒。

0 0