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

最新推荐文章于 2023-07-27 17:38:00 发布

csmzl

最新推荐文章于 2023-07-27 17:38:00 发布

阅读量7.3k

点赞数 1

分类专栏： JS和JQuery 文章标签： jquery javascript setTimeout 区分单双击事件 js单线程

本文链接：https://blog.csdn.net/csmzl/article/details/54018603

版权

JS和JQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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毫秒。

csmzl

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js jquery中的延时方法（set/clearTimeout）

js jquery中的延时方法（set/clearTimeout）起因：当一个标签同时拥有单击和双击事件时，为了区分开单双击事件，在双击事件中需要对单击事件进行延时，然后再清除单击事件。故而用到了setTimeout和clearTimeout方法，其中延时的时间的确定稍有不清楚的地方，故在此进行研究讨论。
复制链接

扫一扫