for循環(huán)與setTimeout

XGBCCC 發(fā)布于2019-08-23 13:45 / 1074人閱讀

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

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

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

然后是和作用域的關(guān)系，for循環(huán)中定義的變量i ，它的作用域是什么？

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

是 window，所以當(dāng)for循環(huán)執(zhí)行完成的時(shí)候，全局變量i的值為6，此時(shí)去執(zhí)行隊(duì)列中的timer函數(shù)，但是timer中并沒有定義i，所以就會(huì)沿著作用域鏈向外層查找，就找到了window中的全局變量i，值為6。

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

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

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