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

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