轉變認知
setTimeout
可能是很多前端工程師愛用的方法,它可以使得一段程式碼延遲執行,例如:
setTimeout(() => console.log('A'), 1000); // 在1秒後列印出'A'
不過我們的理解可能在某些時候遭遇挑戰,假定有如下程式碼:
for (var i = 0; i < 1e9; i++) {
}
setTimeout(() => console.log('A'), 1000);
如果執行上述程式碼,你會發現等待的時間明顯大於1秒,你可能會認為是前面的for
迴圈執行需要一定的時間,setTimeout
需要等待前面的任務執行完畢,所以大於1秒,如果我們把for
和setTimeout
調換一下位置,應該就可以了:
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的時間後立即被執行