JavaScript：如何休眠/等待/延遲代碼執行

簡介

延遲代碼執行/模擬延遲有多種用途——在循環中暫停以顯示數據、等待多線程環境中的其他線程完成（儘管這並不能取代適當的異步編程）或只是減輕服務器或客戶端上的負載, 有連續的請求。

注意： 延遲代碼執行 通俗地稱為“睡覺” 或不太常見的“等待” .

setTimeout() 功能

在原生 JavaScript 中——我們可以使用內置的 setTimeout() “睡眠”/延遲代碼執行的功能：

setTimeout(function (){
  // Code to run here
}, delay)

setTimeout() function 接受兩個參數：一個 function （延遲到期時執行的代碼）和 延遲 （以毫秒為單位）。然後它將返回一個唯一的正整數值，稱為超時 ID，用於標識創建的超時。

你可以在傳入之前調用一個匿名函數或者給它命名：

function printMessage() {
  console.log("I come from a named function!");
}

const timeout1 = setTimeout(() => {console.log("I come from an anonymous function!")}, 1000);
const timeout2 = setTimeout(printMessage, 2000);

console.log('Timeout IDs:', timeout1, timeout2)

這導致：

Timeout IDs:45
I come from an anonymous function!
I come from a named function!

注意： setTimeout() 是一個異步函數——當前超時不會暫停下一個代碼塊的執行。

因此，如果我們有幾個超時，每個超時都會調用一個函數：

setTimeout(() => {console.log("... is 42")}, 4000);
setTimeout(() => {console.log("the universe, and everything")}, 3000);
setTimeout(() => {console.log("The meaning of life")}, 1000);

輸出將是：

The meaning of life
the universe, and everything
... is 42

同樣，調用是異步的——它們不會互相阻塞。消息按倒序轉發，因為第一個超時時間比其他兩個長，第二個超時時間比第三個長。

為了調用方法sleep() - 您可以創建一個簡單的包裝器，將參數委託給 setTimeout() 功能：

function sleep(functionToExecute, delay){
  let timeoutId = setTimeout(functionToExecute(), delay);
  return timeoutId;
}

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

您可以改用它：

const sayHello = () => {
  console.log('Hello, world!');
}

sleep(sayHello, 1000);

我們的 sleep() 函數只是語法糖——它並沒有真正添加任何東西。另一方面，它更符合其他語言，其中大多數都有專用的 sleep() 該名稱的函數。

clearTimeout() 功能

clearTimeout() 函數用於取消先前使用 setTimeout() 創建的超時 ，使用超時返回的ID：

let myTimeoutId = setTimeout(() => {
   // do something 
})

使用返回的 myTimeoutId ，我們可以取消運行超時：

clearTimeout(myTimeoutId);

結論

在這個簡短的指南中，我們介紹瞭如何在 JavaScript 中創建延遲，如何使用 setTimeout() 函數，以及如何取消預定的代碼執行。