許多編程語言都有一個 sleep 函數，可以延遲程序的執行若干秒。JavaScript缺少這個內置功能，但不用擔心。在這篇文章中，我們將探討在JavaScript代碼中實現延遲的各種技巧，同時考慮到該語言的異步性質。

如何在 JS 中創建 sleep 函數

對于那些只想快速解決問題而不想深入了解技術細節的人，我們也有簡單明了的解決方案。下面是如何在你的JavaScript工具箱中添加一個 sleep 函數的最直接方式：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

console.log('Hello');
sleep(2000).then(() => { console.log('World!'); });

運行這段代碼，你會在控制臺看到 “Hello”。然后，在短暫的兩秒鐘后，“World!”v會接著出現。這是一種既簡潔又有效的引入延遲的方法。

如果你只是為了這個來的，那太好了！但如果你對“為什么”和“怎么做”的原因感到好奇，還有更多可以學習的內容。JavaScript中處理時間有其細微之處，了解這些可能會對你有所幫助。

理解JavaScript的執行模型

現在我們已經有了一個快速的解決方案，讓我們深入了解JavaScript的執行模型的機制。理解這一點對于有效地管理代碼中的時間和異步操作至關重要。

考慮以下Ruby代碼：

require 'net/http'
require 'json'

url = 'https://api.github.com/users/jameshibbard'
uri = URI(url)
response = JSON.parse(Net::HTTP.get(uri))
puts response['public_repos']
puts 'Hello!'

正如人們所期望的，這段代碼向GitHub API發送一個請求以獲取我的用戶數據。然后解析響應，輸出與我的GitHub帳戶關聯的公共倉庫的數量，最后在屏幕上打印“Hello!”。執行是從上到下進行的。

相比之下，這是相同功能的JavaScript版本：

fetch('https://api.github.com/users/jameshibbard')
  .then(res => res.json())
  .then(json => console.log(json.public_repos));
console.log('Hello!');

如果你運行這段代碼，它會先在屏幕上輸出“Hello!”，然后輸出與我的GitHub帳戶關聯的公共倉庫的數量。

這是因為在JavaScript中，從API獲取數據是一個異步操作。JavaScript解釋器會遇到 fetch 命令并發送請求。然而，它不會等待請求完成。相反，它會繼續執行，將“Hello!”輸出到控制臺，然后當請求在幾百毫秒后返回時，它會輸出倉庫的數量。

如何在JavaScript中正確使用SetTimeout

既然我們已經更好地理解了JavaScript的執行模型，讓我們看看JavaScript是如何處理延遲和異步代碼的。

在JavaScript中創建延遲的標準方法是使用其 setTimeout 方法。例如：

console.log('Hello');
setTimeout(() => {  console.log('World!'); }, 2000);

這將在控制臺上輸出 "Hello"，然后兩秒后輸出 "World!"。在很多情況下，這已經足夠了：做某事，然后在短暫的延遲后，做其他事情。問題解決！

但不幸的是，事情并不總是那么簡單。

你可能會認為 setTimeout 會暫停整個程序，但事實并非如此。它是一個異步函數，這意味著其余的代碼不會等待它完成。

例如，假設你運行了以下代碼：

console.log('Hello');
setTimeout(() => { console.log('World!'); }, 2000);
console.log('Goodbye!');

你會看到以下輸出：

Hello
Goodbye!
World!

注意“Goodbye!”是如何出現在“World!”之前的？這是因為 setTimeout 不會阻塞其余代碼的執行。

這意味著你不能這樣做：

console.log('Hello');
setTimeout(1000);
console.log('World');

"Hello" 和 "World" 會立即被記錄在控制臺上，之間沒有明顯的延遲。

你也不能這樣做：

for (let i = 0; i < 5; i++) {
  setTimeout(() => { console.log(i); }, i * 1000);
}

花一秒鐘考慮一下上面的代碼片段可能會發生什么。

它不會在每個數字之間延遲一秒鐘打印數字 0 到 4。相反，你實際上會得到五個 4，它們在四秒后一次性全部打印出來。為什么呢？因為循環不會暫停執行。它不會等待 setTimeout 完成才進入下一次迭代。

那么 setTimeout 實際上有什么用呢？現在讓我們來看看。

setTimeout() 函數的檢查和最佳實踐

正如你可以在我們的 setTimeout 教程中閱讀到的，原生JavaScript setTimeout 函數在指定的延遲（以毫秒為單位）后調用一個函數或執行一個代碼片段。

這可能在某些情況下是有用的，例如，如果你希望在訪問者瀏覽你的頁面一段時間后顯示一個彈出窗口，或者你希望在從元素上移除懸停效果之前有短暫的延遲（以防用戶意外地鼠標移出）。

setTimeout 方法接受一個函數的引用作為第一個參數。

這可以是函數的名稱：

function greet(){
  alert('Howdy!');
}
setTimeout(greet, 2000);

它可以是一個指向函數的變量（函數表達式）：

const greet = function(){
  alert('Howdy!');
};
setTimeout(greet, 2000);

或者它可以是一個匿名函數（在這種情況下是箭頭函數）：

setTimeout(() => { alert('Howdy!'); }, 2000);

也可以將一段代碼字符串傳遞給 setTimeout 以供其執行：

然而，這種方法是不可取的，因為：

1. 它很難閱讀（因此很難維護和/或調試）
2. 它使用了一個隱含的 eval，這是一個潛在的安全風險
3. 它比替代方案慢，因為它必須調用JS解釋器

如前所述，setTimeout 非常適合在延遲后觸發一次性操作，但也可以使用 setTimeout（或其表親 setInterval）來讓JavaScript等待直到滿足某個條件。例如，下面是如何使用 setTimeout 等待某個元素出現在網頁上的方式：

function pollDOM () {
  const el = document.querySelector('my-element');

  if (el.length) {
    // Do something with el
  } else {
    setTimeout(pollDOM, 300); // try again in 300 milliseconds
  }
}

pollDOM();

這假設該元素最終會出現。如果你不確定這是否會發生，你需要考慮取消計時器（使用 clearTimeout 或 clearInterval）。

在 JS 中使用遞增超時作為 Sleep 函數的替代方案

有時，你可能會發現自己想要在一系列操作中引入延遲。雖然你可以使用各種方法來模擬一個Sleep函數，但還有另一種經常被忽視的方法：遞增超時。

這個思路很簡單：你不是暫停整個執行線程，而是使用 setTimeout 為每個后續操作增加延遲。這樣，你可以創建一個延遲操作的序列，而不會阻塞瀏覽器或損害用戶體驗。

下面是一個快速示例：

let delay = 1000; // 從1秒的延遲開始

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(`這是消息 ${i + 1}`);
  }, delay);

  delay += 1000; // 每次迭代延遲增加1秒
}

在這個示例中，第一條消息將在1秒后出現，第二條消息在2秒后，依此類推，直到第五條消息在5秒后。

這種方法的優點是它不阻塞，易于實現，并且不需要了解 promises 或 async/await。然而，它不適用于需要精確計時或錯誤處理的復雜異步操作

現代JavaScript中的流控制

編寫 JavaScript 時，我們經常需要等待某件事情發生（例如，從 API 獲取數據），然后做出響應（例如，更新UI以顯示數據）。

上面的示例使用了一個匿名回調函數來實現這一目的，但如果你需要等待多個事情發生，語法很快就會變得相當復雜，你最終會陷入回調地獄。

幸運的是，這門語言在過去幾年里有了很大的發展，現在為我們提供了新的構造來避免這一點。

例如，使用 async await，我們可以重寫最初獲取 GitHub API信息的代碼：

(async () => {
  const res = await fetch(`https://api.github.com/users/jameshibbard`);
  const json = await res.json();
  console.log(json.public_repos);
  console.log('Hello!');
})();

現在，代碼從上到下執行。JavaScript 解釋器等待網絡請求完成，首先記錄公共倉庫的數量，然后記錄“Hello！”消息。

將Sleep函數引入原生JavaScript

如果你還在看這篇文章，那么我猜你一定是想阻塞那個執行線程，并讓JavaScript等待一下。

下面是你可能會這樣做的方式：

function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}

console.log('Hello');
sleep(2000);
console.log('World!');

正如預期的那樣，這將在控制臺上打印“Hello”，暫停兩秒，然后打印“World！”

它通過使用Date.now方法獲取自1970年1月1日以來經過的毫秒數，并將該值分配給一個 date 變量。然后它創建一個空的 currentDate 變量，然后進入一個 do ... while 循環。在循環中，它會重復獲取自1970年1月1日以來經過的毫秒數，并將該值分配給之前聲明的 currentDate 變量。只要 date 和 currentDate 之間的差異小于所需的毫秒數的延遲，循環就會繼續進行。

任務完成了，對嗎？好吧，也不完全是……

如何在JavaScript中編寫更好的Sleep函數

也許這段代碼正是你所期望的，但請注意，它有一個很大的缺點：循環會阻塞JavaScript的執行線程，并確保在它完成之前沒有人能與你的程序進行交互。如果你需要很大的延遲，甚至有可能會讓整個程序崩潰。

那么應該怎么做呢？

事實上，也可以結合本文前面學到的技巧來制作一個不太侵入性的 sleep 方法：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

console.log('Hello');
sleep(2000).then(() => { console.log('World!'); });

這段代碼將在控制臺上打印“Hello”，等待兩秒，然后打印“World！”在底層，我們使用setTimeout 方法在給定的毫秒數后解析一個 promise。

注意，我們需要使用一個 then 回調來確保第二條消息是帶有延遲的。我們還可以在第一個回調函數后面鏈式地添加更多回調函數。

這樣做是可行的，但看起來不太好看。我們可以使用async ... await來美化它：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedGreeting() {
  console.log('Hello');
  await sleep(2000);
  console.log('World!');
  await sleep(2000);
  console.log('Goodbye!');
}

delayedGreeting();

這看起來更好看，但這意味著使用 sleep 函數的任何代碼都需要被標記為 async。

當然，這兩種方法仍然有一個缺點（或特點），那就是它們不會暫停整個程序的執行。只有你的函數會睡眠：

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedGreeting() {
  console.log('Hello');
  await sleep(2000); // await只暫停當前的異步函數
  console.log('World!');
}

delayedGreeting();
console.log('Goodbye!');

上面的代碼會依次打印出：

Hello
Goodbye!
World!

這樣，你可以根據需要靈活地使用不同的方法和技術來實現JavaScript中的延遲和異步操作。

創建 JS Sleep函數的最佳實踐

我們已經探討了各種在JavaScript中引入延遲的方法。現在讓我們總結一下哪種方法最適合不同的場景，以及哪種方法通常應該避免。

1.純粹的setTimeout

console.log('Hello');
setTimeout(() => { console.log('World!'); }, 2000);

?? 優點：容易理解，非阻塞。 ?? 缺點：對異步操作的控制有限。 ?? 何時使用：適用于簡單的、一次性的延遲，或基礎輪詢。

2.遞增的 setTimeout

setTimeout(() => { console.log('Hello'); }, 1000);
setTimeout(() => { console.log('World!'); }, 2000);

?? 優點：非阻塞性，易于實現，不需要了解 promises 或 async/await。 ?? 缺點：不適用于復雜的異步操作。沒有錯誤處理。 ?? 何時使用：用于有時間間隔的簡單序列。

3.通過循環阻塞事件循環

console.log('Hello');
const date = Date.now();
let currentDate = null;
do {
  currentDate = Date.now();
} while (currentDate - date < 2000);
console.log('World!');

?? 優點：模仿傳統的sleep行為。 ?? 缺點：阻塞整個線程，可能會凍結UI或導致程序崩潰。 ?? 強烈不推薦：只有在你絕對需要暫停執行并且意識到其中的風險時才使用。

4.使用Promises與setTimeout

const sleep = function(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
console.log('Hello');
sleep(2000).then(() => { console.log('World!'); });

?? 優點：非阻塞性，對異步操作有更多的控制。 ?? 缺點：需要理解promises。更長的promise鏈可能會變得有點混亂。 ?? 何時使用：當你需要更多對時間和異步操作的控制時。

5.使用async/await與Promises

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function delayedGreeting() {
  console.log('Hello');
  await sleep(2000);
  console.log('World!');
  await sleep(2000);
  console.log('Goodbye!');
}

delayedGreeting();

?? 優點：語法清晰，易于閱讀，非阻塞。 ?? 缺點：需要理解async/await和promises。需要在模塊外部“包裝”函數。 ? 強烈推薦：這是最現代和干凈的方法，尤其是在處理多個異步操作時。

總結

JavaScript中的時序問題是許多開發人員頭疼的原因，你如何處理它們取決于你想實現什么。

盡管在許多其他語言中都有 sleep 函數，但我鼓勵你去接受JavaScript的異步特性，盡量不要與這門語言作對。當你習慣了它，它實際上是相當不錯的。