JavaScript 事件迴圈(1) —— 從 setTimeout 說起

_王寧寧發表於2022-03-28

轉變認知

setTimeout 可能是很多前端工程師愛用的方法,它可以使得一段程式碼延遲執行,例如:

setTimeout(() => console.log('A'), 1000); // 在1秒後列印出'A'

不過我們的理解可能在某些時候遭遇挑戰,假定有如下程式碼:

for (var i = 0; i < 1e9; i++) {
}
setTimeout(() => console.log('A'), 1000);

如果執行上述程式碼,你會發現等待的時間明顯大於1秒,你可能會認為是前面的for迴圈執行需要一定的時間,setTimeout需要等待前面的任務執行完畢,所以大於1秒,如果我們把forsetTimeout調換一下位置,應該就可以了:

setTimeout(() => console.log('A'), 1000);
for (var i = 0; i < 1e9; i++) {
}

接著執行上面的程式碼,你會發現和之前一樣,我們還是得等待1秒以上的時間才看到A被列印出來,甚至,我們可以試試看下面的程式碼:

setTimeout(() => console.log('A'), 0); // 0秒後就列印字母A,這下總該立即列印出來了吧
for (var i = 0; i < 1e9; i++) {
}

不過事與願違,我們看到此時字母A還是在明顯大於1秒後才被列印出來,到底發生了什麼呢?

首先我們要糾正一下自己對於 setTimeout 的感性認識:setTimeout 的第二個時間引數x,並不一定能保證第一個引數(回撥函式)在經過x的時間後立即被執行

相關文章