從多個方面深入了解JS暫停幾秒再執行

一、使用setTimeout實現JS暫停幾秒再執行

JS是一門單線程語言，在執行一個任務時，會阻塞之後的任務，這就導致了一些場景下需要暫停JS執行，等待一段時間再繼續執行的情況。setTimeout函數就是一種解決方案。

setTimeout(function(){
    //需要暫停執行的代碼
}, 1000);

setTimeout的第一個參數是一個匿名函數，在其中編寫需要暫停執行的代碼。第二個參數表示需要暫停的時間，單位是毫秒。上述代碼表示暫停1秒後執行代碼。

需要注意的是，setTimeout的精度不一定很高。因為JS是單線程運行的，當時間到期後，JS需要獲得資源才能真正地執行代碼。如果此時正在執行其他任務，setTimeout就需要等待其他任務執行完畢後才能執行。這就導致在執行繁忙任務時，setTimeout的實際執行時間可能會比設置的時間晚幾十甚至幾百毫秒。

二、使用Promise實現JS暫停幾秒再執行

Promise是ES6中新引入的特性，用於異步編程。通過Promise對象，我們可以更加方便地實現JS暫停幾秒再執行的需求。我們可以使用Promise的setTimeout方法：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function main() {
  console.log('Hello');
  await sleep(1000);
  console.log('World');
}
main(); //打印Hello後，暫停1秒後再打印World

上述代碼中，sleep函數返回一個Promise對象，resolve函數會在過了指定的毫秒數後被調用。main函數通過async關鍵字聲明，await後面跟着一個Promise對象，表示要等待Promise對象的完成，才能繼續執行下面的代碼。

三、使用Generator函數實現JS暫停幾秒再執行

Generator是ES6中的另一個新特性，可以使用它實現JS暫停幾秒再執行的需求。

function* sleep(ms) {
  yield new Promise(resolve => setTimeout(resolve, ms));
}
function* main() {
  console.log('Hello');
  yield* sleep(1000);
  console.log('World');
}
for(let s of main()){s}

上述代碼中，Generator函數sleep返回一個Promise對象，通過使用yield關鍵字，表示函數暫停並返回一個Promise對象。main函數通過yield*關鍵字，暫停執行，等待sleep函數執行完畢後再繼續執行下面的代碼。

需要注意的是，Generator函數的執行需要使用遍歷器實現。因此在最後使用了一個for…of循環來遍歷main函數，實現暫停幾秒後再執行的效果。

四、注意JS暫停幾秒再執行會阻塞UI線程

在JS暫停幾秒再執行時，會阻塞UI線程，導致網頁卡頓。例如：

console.log('Start');
setTimeout(function(){
    for(let i=0; i<1000000000; i++){}
    console.log('End');
}, 5000)

上述代碼中，JS會在執行setTimeout函數時停止執行，等待5秒後再執行包含一個循環的函數。循環的次數越多，JS需要執行的時間也越長，此時UI線程就會被卡住。因此，對於需要處理大量數據或需要等待較長時間的代碼，必須使用其他方式避免阻塞主線程，例如Web Worker。