for循環與setTimeout

XGBCCC 發布于2019-08-23 13:45 / 1082人閱讀

摘要：修改下面代碼，使其能夠正確運行為什么上面代碼的執行結果是首先說明，這與異步和作用域都有關系。先來說和異步的關系，是異步操作，所謂的異步就是會在同步操作全部執行完成之后，才開始執行的。

// 修改下面代碼，使其能夠正確運行
for(var i = 0; i < 6; i++) {
    setTimeout(function timer(){
        console.log(i)
    }, i * 1000)
}

為什么上面代碼的執行結果是 [6,6,6,6,6,6] ?
首先說明，這與異步和作用域都有關系。
先來說和異步的關系，setTimeout是異步操作，所謂的異步就是會在同步操作全部執行完成之后，才開始執行的。放在上面的代碼中解釋就是，setTimeout是在每次for循環的時候都會調用的（用于將setTimeout內部的代碼放入隊列，在同步代碼執行完成之后，再根據定時執行），但是setTimeout中的代碼是在for循環結束之后才開始執行的，所以當for循環執行完成的時候，i變成了6，那么timer中對i的引用也變成了6。

然后是和作用域的關系，for循環中定義的變量i ，它的作用域是什么？

for(var i = 0; i<6; i++)   ---->  var i = 0; for(i; i<6; i++)

是 window，所以當for循環執行完成的時候，全局變量i的值為6，此時去執行隊列中的timer函數，但是timer中并沒有定義i，所以就會沿著作用域鏈向外層查找，就找到了window中的全局變量i，值為6。

// 第一種方法：使用立即執行函
for(var i = 0; i < 6; i++) {
    (function(j){
        setTimeout(function timer(){
            console.log(j)
        }, j * 1000)
    })(i)
}

// 第二種方法：使用let關鍵字
for(let i = 0; i < 6; i++) {
    setTimeout(function timer(){
        console.log(i)
    }, i * 1000)
}

這兩種方法的本質其實是一樣的，都是創建了一個新的變量去保存for循環中每次變化的i的值，再將其傳遞給timer，使timer每次在執行的時候都能得到正確的值。在使用let的時候，可以看到babel將其轉譯之后的結果，使用了一個新的參數來保存每次循環時的i，所以在6次循環中，會開辟出6個內存空間，保存著6個不同的i ，這樣的話，setTimeout中對i的引用就能得到正確的值。

GPU云服務器云服務器 while循環與for循環 for循環 for循環語句 for循環數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99503.html

JavaScript系列——JavaScript同步、異步、回調執行順序之經典閉包setTimeou

摘要：同步異步回調傻傻分不清楚。分割線上面主要講了同步和回調執行順序的問題，接著我就舉一個包含同步異步回調的例子。同步優先回調內部有個，第二個是一個回調回調墊底。異步也，輪到回調的孩子們回調，出來執行了。同步、異步、回調？傻傻分不清楚。大家注意了，教大家一道口訣：同步優先、異步靠邊、回調墊底（讀起來不順）用公式表達就是：同步 => 異步 => 回調這口訣有什么用呢？用來對付面試的...

lewif 2019-08-29 12:21 評論0 收藏0
JavaScript系列——JavaScript同步、異步、回調執行順序之經典閉包setTimeou

摘要：同步異步回調傻傻分不清楚。分割線上面主要講了同步和回調執行順序的問題，接著我就舉一個包含同步異步回調的例子。同步優先回調內部有個，第二個是一個回調回調墊底。異步也，輪到回調的孩子們回調，出來執行了。同步、異步、回調？傻傻分不清楚。大家注意了，教大家一道口訣：同步優先、異步靠邊、回調墊底（讀起來不順）用公式表達就是：同步 => 異步 => 回調這口訣有什么用呢？用來對付面試的...

rockswang 2019-08-20 15:32 評論0 收藏0
前端校招準備系列--js中的setTimeout到底是什么？

摘要：瀏覽器是多進程的，而瀏覽器的內核渲染進程是多線程的。如果已經將回調函數放進任務隊列，但是主線程正在執行一個非常耗時的任務，當這個任務執行完畢后，主線程去任務隊列中取任務，這個時候，就會出現連續執行的情況，也就是說相當于失效了。前言 ??在刷筆試題的時候，經常會碰到setTimeout的問題，只知道這個是設置定時器；但是考察的重點一般是在一個方法中包含了定時器，定時器中的打印和方法中打...

Godtoy 2019-08-23 13:41 評論0 收藏0
process.nextTick() 、setTimeout()、setInterval() 運行機

摘要：注意如果主邏輯的代碼執行時間已經超過了第二個參數設置的時間，那么等運行到該回調函數時，它會忽略掉這個時間，并立即執行。如果某一個進行大量的計算，那么它就會阻塞在當前的回調函數中，等待該計算完成后，再執行下一個的回調函數。 setTimeout() ? JavaScript是一個單線程的語言，也就是說它同一時間只能執行一段代碼，接下來我們通過兩個例子說明一下單線程語言和多線程語言的...

lscho 2019-08-23 15:59 評論0 收藏0