許多編程語言都有一個 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 以供其執行：
然而，這種方法是不可取的，因為：
-
它很難閱讀（因此很難維護和/或調試） -
它使用了一個隱含的 eval，這是一個潛在的安全風險 -
它比替代方案慢，因為它必須調用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);
