setTimeout那些事兒

時間  2019-11-17
標籤 settimeout 那些 事兒 简体版
原文   原文鏈接
1、setTimeout那些事兒之單線程

一直以來，你們都在說Javascript是單線程，瀏覽器不管在何時，都且只有一個線程在運行JavaScript程序。html

可是，不知道你們有疑問沒——就是咱們在編程過程當中的setTimeout(相似的還有setInterval、Ajax)，不是異步執行的嗎？！！chrome

例如：編程

<!DOCTYPE html>
    <head>
        <title>setTimeout</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
            console.log("a");
            //利用setTimeout延遲執行匿名函數
            setTimeout(function(){
                console.log("b");
            },100);
            console.log("c");
        </script>
    </body>
</html>

運行代碼，打開chrome調試器，得以下結果瀏覽器

 

這個結果很容易理解，由於我setTimeout裏的內容是在100ms後執行的嘛，固然是先輸出a，再輸出c，100ms後再輸出setTimeout裏的b嘛。多線程

咦，那Javascript這不就不是單線程了嘛，這不就能夠實現多線程了？！！閉包

其實，不是的。setTimeout沒有打破JavaScript的單線程機制，它其實仍是單線程。app

爲何這麼說呢，那就得理解setTimeout究竟是個怎麼回事。異步

請看下面的代碼，猜結果:函數

<!DOCTYPE html>
    <head>
        <title>setTimeout</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
            var date = new Date();
            //打印才進入時的時間
            console.log('first time: ' + date.getTime());
            //一秒後打印setTimeout裏匿名函數的時間
            setTimeout(function(){
                var date1 = new Date();
                console.log('second time: ' + date1.getTime() );
                console.log( date1.getTime() - date.getTime() );
            },1000);
            //重複操做
            for(var i=0; i < 10000 ; i++){
                console.log(1);
            }
        </script>
    </body>
</html>

看了上面的代碼，猜猜輸出的結果是多少呢？1000毫秒？動畫

咱們打開chrome調試器，見下圖

納尼，怎麼不是1000毫秒呢？！！！

咱們再看看下面的代碼：

<!DOCTYPE html>
    <head>
        <title>setTimeout</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
            //一秒後執行setTimeout裏的匿名函數，alert下
            setTimeout(function(){
                alert("monkey");
            },1000);
            while(true){};
        </script>
    </body>
</html>

運行代碼後！

我靠，怎麼一直刷新，瀏覽器卡死了呢，而且沒有alert！！

按道理，即便我while無限循環，在1秒後也得alert一下啊。

種種問題皆一個緣由，JavaScript是單線程 。

要記住JavaScript是單線程，setTimeout沒有實現多線程，它背後的真相是這樣滴：

JavaScript引擎是單線程運行的,瀏覽器不管在何時都只且只有一個線程在運行JavaScript程序。

瀏覽器的內核是多線程的，它們在內核控制下相互配合以保持同步，一個瀏覽器至少實現三個常駐線程：JavaScript引擎線程，GUI渲染線程，瀏覽器事件觸發線程。

    *JavaScript引擎是基於事件驅動單線程執行的，JavaScript引擎一直等待着任務隊列中任務的到來，而後加以處理，瀏覽器不管何時都只有一個JavaScript線程在運行JavaScript程序。

    *GUI渲染線程負責渲染瀏覽器界面，當界面須要重繪（Repaint）或因爲某種操做引起迴流(Reflow)時,該線程就會執行。但須要注意，GUI渲染線程與JavaScript引擎是互斥的，當JavaScript引擎執行時GUI線程會被掛起，GUI更新會被保存在一個隊列中等到JavaScript引擎空閒時當即被執行。

    *事件觸發線程，當一個事件被觸發時該線程會把事件添加到待處理隊列的隊尾，等待JavaScript引擎的處理。這些事件可來自JavaScript引擎當前執行的代碼塊如setTimeout、也可來自瀏覽器內核的其餘線程如鼠標點擊、Ajax異步請求等，但因爲JavaScript的單線程關係全部這些事件都得排隊等待JavaScript引擎處理（當線程中沒有執行任何同步代碼的前提下才會執行異步代碼）。

so,經過以上講解，以上種種問題迎刃而解。

2、setTimeout那些事兒之延遲時間爲0

當setTimeout的延遲時間爲0時，你們想一想它會怎麼執行呢？

例以下面的代碼：

<!DOCTYPE html>
    <head>
        <title>setTimeout</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
            console.log('a');
            setTimeout(function(){
                console.log('b');
            },0);
            console.log('c');
            console.log('d');
        </script>
    </body>
</html>

運行代碼結果以下：

假設你已經知道Javascript單線程的運行原理了。那麼，可能會有這樣的疑問：setTimeout的時間爲0，都沒加處處理隊列的末尾，怎麼會晚執行呢？不該該當即執行嗎？

個人理解是，就算setTimeout的時間爲0，可是它仍然是setTimeout啊，原理是不變的。因此會將其加入到隊列末尾，0秒後執行。

何況，通過查找資料發現，setTimeout有一個最小執行時間，當指定的時間小於該時間時，瀏覽器會用最小容許的時間做爲setTimeout的時間間隔，也就是說即便咱們把setTimeout的毫秒數設置爲0，被調用的程序也沒有立刻啓動。

這個最小的時間間隔是多少呢？

這和瀏覽器及操做系統有關。在John Resig的《Javascript忍者的祕密》一書中提到--Browsers all have a 10ms minimum delay on OSX and a(approximately) 15ms delay on Windows.（在蘋果機上的最小時間間隔是10毫秒，在Windows系統上的最小時間間隔大約是15毫秒），另外，MDC中關於setTimeout的介紹中也提到，Firefox中定義的最小時間間隔（DOM_MIN_TIMEOUT_VALUE）是10毫秒，HTML5定義的最小時間間隔是4毫秒。

說了這麼多，setTimeout的延遲時間爲0，看來沒什麼意義嘛，都是放在隊列後執行嘛。

非也，天生我材必有用，就看你怎麼用咯。拋磚迎玉下。

一、能夠用setTimeout的延遲時間爲0，模擬動畫效果哦。

詳情請見下代碼：

 1 <!DOCTYPE html>
 2     <head>
 3         <title>setTimeout</title>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     </head>
 6     <body>
 7         <div id="container" style="width:100px;height:100px;border:1px solid black;"></div>
 8         <div id="btn" style="width:40px;height:40px;line-height:40px;margin-top:20px;background:pink;">click</div>
 9         <script>
10             window.onload = function(){
11                 var con = document.getElementById('container');
12                 var btn = document.getElementById('btn'); 
13                 //Params: i 爲起始高度，num爲預期高度
14                 function render(i, num) {
15                     i++; 
16                     con.style.height = i + 'px';
17                     //亮點在此
18                     if(i < num){
19                         setTimeout(function() {
20                             render(i, num);
21                         },0);
22                     }
23                     else {
24                         con = null;
25                         btn = null;
26                     }
27                 };
28                 btn.onclick = function(){
29                     render(100, 200);
30                 };
31             };
32         </script>
33     </body>
34 </html>

因爲是動畫，因此想看其效果，還請各位看官運行下代碼哦。

代碼第19行中，利用setTimeout，在每一次render執行完成（給高度遞增1）後，因爲Javascript是單線程，且setTimeout裏的匿名函數會在render執行完成後，再執行render。因此能夠實現動畫效果。

二、能夠用setTimeout的延遲時間爲0，實現捕獲事件哦。

當咱們點擊子元素時，咱們能夠利用setTimeout的特性，來模擬捕獲事件。

請見以下代碼：

<!DOCTYPE html>
    <head>
        <title>setTimeout</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>    
            #parent {
                width:100px;
                height:100px;
                border:1px solid black;
            }   
            #child {
                width:50px;
                height:50px;
                background:pink;
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="child"></div>
        </div>
        <script>
            //點擊子元素，實現子元素的事件在父元素觸發後觸發
            window.onload = function(){
                var parent = document.getElementById('parent'); 
                var child = document.getElementById('child');
                parent.onclick = function(){
                    console.log('parent');
                }
                child.onclick = function(){
                    //利用setTimeout，冒泡結束後，最後輸出child
                    setTimeout(function(){
                        console.log('child');   
                    },0);
                }
                parent = null;
                child = null;   
            }
        </script>
    </body>
</html>

 執行代碼，點擊粉紅色方塊，輸出結果：

 

3、setTimeout那些事兒之this

說到this，對於它的理解就是：this是指向函數執行時的當前對象，假若沒有明確的當前對象，它就是指向window的。

好了，那麼咱們來看看下面這段代碼：

<!DOCTYPE html>
    <head>
        <title>setTimeout</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
           var name = '!!';
           var obj = {
               name:'monkey',
               print:function(){
                   console.log(this.name);
               },
               test:function(){
                   //this.print
                   setTimeout(this.print,1000);
               }
           }
           obj.test();
        </script>
    </body>
</html>

經過chrome調試器，查看輸出結果：

 

咦，它怎麼輸出的是」!!」呢？不該該是obj裏的」monkey」嗎？！！

這是由於setTimeout中所執行函數中的this，永遠指向window。

不對吧，那上面代碼中的setTimeout(this.print,1000)裏的this.print怎麼指向的是obj呢？！！

注意哦，我這裏說的是「延遲執行函數中的this」，而不是setTimeout調用環境下的this。

什麼意思？

setTimeout(this.print,1000)，這裏的this.print中的this就是調用環境下的；

而this.print=function(){console.log(this.name);}，這個匿名函數就是setTimeout延遲執行函數，其中的this.name也就是延遲執行函數中的this啦。

嘿嘿，這下明白了吧。

var age = 24;
function Fn(){
    this.age = 18;
    setTimeout(function(){
        //this表明window
        console.log(this);
        //輸出24，而不是Fn的18
        console.log(this.age);
    },1000);
}
new Fn();

咦，那有個疑問，好比我想在setTimeout延遲執行函數中的this指向調用的函數呢，而不是window？！！咱們該怎麼辦呢。

經常使用的方法就是利用that。

that？

對，that。利用閉包的知識，讓that保證你傳進去的this，是你想要的。

詳情見下:

var age = 24;
function Fn(){
    //that在此
    var that = this;
    this.age = 18;
    setTimeout(function(){
        console.log(that);
        console.log(that.age);
    },1000);
}
new Fn();

還有一種方法就是，利用bind。

以下:

var age = 24;
function Fn(){
    this.age = 18;
    //bind傳入this
    setTimeout(function(){
        console.log(this);
        console.log(this.age);
    }.bind(this),1000);
}
new Fn();

好了時間也不早，晚安~另外，清明快樂哦

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程