經典面試題 for循環內setTimeout順序輸出的解法

TNFE 發布于2019-08-22 15:50 / 1222人閱讀

摘要：這道題挺經典的，輸出結果是什么呢結果是毫秒之后，輸出個隔一秒輸出在上乘個就行原因是，循環在主線程內，是異步方法，在任務隊列里面，只有主線程執行完后，任務隊列才執行，此時的值已經是，所以得到結果是個那么怎么解決呢其實思路很容易，只要每次循環把

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000);
}

這道題挺經典的，輸出結果是什么呢？結果是1000毫秒之后，輸出5個5（隔一秒輸出在1000上乘個i就行）
原因是，for循環在主線程內，setTimeout是異步方法，在任務隊列里面，只有主線程執行完后，任務隊列才執行，此時i的值已經是5，所以得到結果是5個5

那么怎么解決呢？其實思路很容易，只要每次循環把當前的i值傳入setTimeout內即可

方法1：使用let

for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000);
}

使用let 相當于每次循環的時候都新建了1個i并為其賦值

方法2：定義函數并傳值

for (var i = 0; i < 5; i++) {
    function a(i) {
        setTimeout(() => {
            console.log(i)
        }, 1000);        
    }
    a(i)
}

方法3：IIFE（立即執行函數）

for (var i = 1; i <= 5; i++) {
    ~function(i) {
        setTimeout(() => {
            console.log(i)
        }, 1000);
    }(i)
}

方法4：使用閉包

for (var i = 1; i <= 5; i++) {
    setTimeout(
        (i =>
            () => console.log(i)
        )(i), 1000);
}

方法5：setTimeout第三個參數傳入i(是的，你沒看錯，setTimeout還有第三個參數)

for (var i = 1; i <= 5; i++) {
    setTimeout((i) => console.log(i),1000,i);
}

GPU云服務器云服務器 s循環經典邏輯題 linux的面試題 js的基礎面試題面試題

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

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

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

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

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

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

rockswang 2019-08-20 15:32 評論0 收藏0
8道經典JavaScript面試題解析，你真的掌握JavaScript了嗎？

摘要：瀏覽器的主要組成包括有調用堆棧，事件循環，任務隊列和。好了，現在有了前面這些知識，我們可以看一下這道題的講解過程實現步驟調用會將函數放入調用堆棧。由于調用堆棧是空的，事件循環將選擇回調并將其推入調用堆棧進行處理。進程再次重復，堆棧不會溢出。 JavaScript是前端開發中非常重要的一門語言，瀏覽器是他主要運行的地方。JavaScript是一個非常有意思的語言，但是他有很多一些概念，大...

taowen 2019-08-26 10:41 評論0 收藏0
用一道大廠面試題帶你搞懂事件循環機制

本文涵蓋面試題的引入對事件循環面試題執行順序的一些疑問通過面試題對微任務、事件循環、定時器等對深入理解結論總結面試題面試題如下，大家可以先試著寫一下輸出結果，然后再看我下面的詳細講解，看看會不會有什么出入，如果把整個順序弄清楚 Node.js 的執行順序應該就沒問題了。 async function async1(){ console.log(async1 start) ...

ShowerSun 2019-08-26 10:57 評論0 收藏0