鍍金池/ 問答/HTML/ 為什么這兩種setTimeout執(zhí)行順序不一樣

為什么這兩種setTimeout執(zhí)行順序不一樣

const obj = {
    name: " jsCoder",
    skill: ["es6", "react", "angular"],
    say: function ()
    {
        var that = this;
        for (var i = 0, len = this.skill.length; i < len; i++)
        {
            setTimeout((function()
            {
                console.log(i);
                console.log(that.skill[i]);
            })(), 0)
            console.log(i);
        }
    }
};
obj.say();

這段代碼在Node里執(zhí)行會報錯，但可以在瀏覽器中執(zhí)行，執(zhí)行結果：

clipboard.png

第二種寫法：

const obj = {
    name: " jsCoder",
    skill: ["es6", "react", "angular"],
    say: function () {
        var that = this;
        for (var i = 0, len = this.skill.length; i < len; i++) {
            (function () {
                var j = i;
                setTimeout((function () {
                    console.log(j);
                    console.log(that.skill[j]);
                }), 0)
            })()
            console.log(i);
        }
    }
};
obj.say();

clipboard.png

為什么，立即執(zhí)行函數(shù)是異步任務嗎？

回答
編輯回答
伴謊

你的setTimeout的寫法是錯的（如果我沒猜錯你的原意的話），setTimeout的第一個參數(shù)是一個回調函數(shù)，第二個參數(shù)是延遲執(zhí)行的毫秒數(shù)。你的第一個參數(shù)雖然好像是一個函數(shù)，但你把這個函數(shù)用括號括起來，又在后面加了個括號立即去調用它，這樣setTimeout的第一個參數(shù)遍被你設置成了這個函數(shù)的返回值而不是讓setTimeout來幫你執(zhí)行這個函數(shù)，從你寫的這個函數(shù)來看，這個返回值應該是undefined，而undefined不是一個函數(shù)，它不是可調用的，我猜node里報的錯應該是類似

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function

at setTimeout (timers.js:425:11)

這樣的錯誤吧？
正確的寫法應該是：

setTimeout(function() {
  // Do something here
}, someTime);

換種說法就是，你需要傳給setTimeout的第一個參數(shù)是一個函數(shù)指針/引用，而不是當場調用這個函數(shù)——這樣你將把函數(shù)的返回值而不是這個函數(shù)本身作為第一個參數(shù)傳入。

另外，setTimeout確實是異步的，并且現(xiàn)在推薦用setImmediate代替setTimeout(func, 0)。

2017年9月5日 00:06
編輯回答
祉小皓

首先setTimeout是異步執(zhí)行的，堆棧中碰到setTimeout會交給瀏覽器內核處理，等待setTimeout達到觸發(fā)條件（即設定的時間），再返回給執(zhí)行隊列.先說說概念
第一種情況setTimeout里的function用立即執(zhí)行函數(shù)，會直接執(zhí)行。如果你把后面的()去掉你便會發(fā)現(xiàn)不會立即執(zhí)行，而且后面輸出的為undefine因為已經(jīng)被回收啦
第二種情況setTimeout外加入了閉包，閉包中的變量會保存在內存中，并不會被垃圾回收機制回收。所以閉包中的i賦值給j后，j一直都存在，并未被回收，前面的0,1,2是主線程的i,后面的0,es6,1,react,2,angular則是setTimeout里輸出的。立即函數(shù)不是異步的，setTimeout才是，交給瀏覽器內核處理再返回給執(zhí)行隊列的是setTimeout

2018年9月21日 22:21