資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學JavaScript 的 sleep() 函式是什麼？
有時我們在任何語言中執行某些任務時，都會透過保持時間延遲來實現。例如，我們正在製作一個每秒更新的計時器應用程式。在這種情況下，我們等待一秒鐘，然後一個接一個地更新秒計時器。我們也稱這種延遲為 sleep()。在 Java 等其他一些語言中，有一個 sleep() 函式用於等待一段時間。在本文中，我們將瞭解 JavaScript 中 sleep() 函式的等效方法。讓我們遵循延遲生成的語法。
語法（定義函式）
function sleep(t: the time in milliseconds) {
return new Promise( resolve => setTimeout( resolve, t ));
}
// to apply delay
sleep(t)
語法（單行解決方案）
await new Promise( r => setTimeout( r, t: the time in milliseconds));
語法（另一種單行定義解決方案）
const sleep = ms => new Promise(r => setTimeout(r, t: the time in milliseconds)); // use delay like: await sleep( <duration> );
讓我們來看一個例子，我們每秒列印一行。您在本文的輸出中看不到任何變化。您可以透過在本地系統或任何線上 HTML 編輯器中執行它來檢視效果，或者將此程式碼儲存到系統並在瀏覽器中執行。
示例
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { function sleep(time) { return new Promise(resolve => setTimeout(resolve, time)); } async function printAndWait() { for (let i = 0; i < 10; i++) { content += `Printing line after waiting ${i} seconds...` + "<br>"; opDiv.innerHTML = content await sleep(i * 1000); } content += 'Printing is completed' + "<br>";opDiv.innerHTML = content } printAndWait(); } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
在最後一個例子中，我們使用了 `await` 關鍵字。這個 `await` 關鍵字只能在 `async` 函式（函式定義前有 `async` 關鍵字的函式）內部執行，否則，我們可以在越來越多支援的環境中在指令碼的頂層使用 `await`。這個 `await` 關鍵字只會暫停當前的 `async` 函式。這樣，它就不會阻塞指令碼其餘部分的執行。如果我們想要一個阻塞結構，我們可以使用 `Atomics.wait()`，但這依賴於瀏覽器，大多數瀏覽器不允許在瀏覽器的主執行緒上使用它。
當我們使用 Promise 時，我們可以使用 `.then()` 函式在等待一段時間後執行一些程式碼。因此，`sleep()` 返回 Promise，然後可以透過 `.then()` 函式執行後續任務。請參閱示例以更好地理解。這裡每一行都在兩秒鐘後列印。列印語句位於非同步 `sleep` 方法下的匿名函式中。
示例
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { function sleep(time) { return new Promise(resolve => setTimeout(resolve, time)); } async function printAndWait() { for (let i = 0; i < 10; i++) { await sleep(2000).then(() => { content += `Printing line after waiting 2 seconds` + "<br>"; opDiv.innerHTML = content }); } content += 'Printing is completed' + "<br>";opDiv.innerHTML = content } printAndWait(); } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
讓我們使用 sleep() 製作一個 2 分鐘的倒計時計時器。
示例（HTML）
<!DOCTYPE html> <html> <title>Online Javascript Editor</title> <head> </head> <body> <button onclick = startTimer()> Start Timer </button> <button onclick = resetTimer()> Restart Timer </button> <h2 id = "timerText" > 2:00 </h2> </body> <script> seconds = 120; var timerElem; function resetTimer(){ timerElem = document.getElementById( "timerText" ); timerElem.innerHTML = "2:00"; seconds = 120; } function startTimer(){ timerElem = document.getElementById( "timerText" ); countDown(); } function sleep( time ) { return new Promise( resolve => setTimeout( resolve, time )); } function setCurrentTime(){ var min = Math.floor( seconds / 60); var sec = seconds % 60; var secStr = String(sec).padStart(2, '0'); time = `${min}:${secStr}`; timerElem.innerHTML = time; seconds -= 1; } async function countDown(){ while(seconds >= 0){ await sleep(1000).then(setCurrentTime); } } </script> </body> </html>
在這個例子中，我們建立了兩個按鈕用於啟動和重置計時器。它會將計時器重置為 2 分鐘。每秒鐘它都會將 `seconds` 值減少 1，然後以 m:ss 的格式顯示它。這是 JavaScript 中 sleep() 方法的一個例子。
結論
在某些應用程式中需要等待一小段時間。與其他語言一樣，JavaScript 也具有時間相關的觸發函式，這些函式可以透過 Promise 實現。由於計時器延遲對於系統來說是非同步的，我們必須使用 `async` 函式來執行它們。並且在呼叫 `sleep()` 方法之前使用 `await` 關鍵字。這些程式碼只是為了記住在使用延遲或 sleep() 時非同步程式設計技能。
716 次瀏覽
