在 JavaScript 中等待 X 秒
Moataz Farid
2023年10月12日
-
在 JavaScript 中使用
setTimeout()來等待 X 秒 -
在 JavaScript 中使用
promises和async/await等待 X 秒 -
使用
for迴圈來實現 JavaScript 中的同步delay函式
本教程將講解如何在 JavaScript 中等待 x 秒後再繼續執行。我們將實現一個 delay(seconds) 函式，它將阻塞執行緒 x 秒。我們還將解釋這個延遲的多種實現技術。
當我們談到實現延遲函式時，使用最廣泛的方法是非同步的 setTimeout()。
在 JavaScript 中使用 setTimeout() 來等待 X 秒
非同步 setTimeout() 方法是高階函式之一，它以回撥函式為引數，在輸入時間結束後執行該函式。引數中給出的時間是以 ms 為單位的。
console.log('I am the first log');
setTimeout(function() {
console.log('I am the third log after 5 seconds');
}, 5000);
console.log('I am the second log');
輸出：
I am the first log
I am the second log
I am the third log after 5 seconds
在 JavaScript 中使用 promises 和 async/await 等待 X 秒
在非同步上下文中實現延遲函式的一種方法是結合 async/await 概念和 promises 概念。我們可以建立一個延遲函式，在裡面返回一個新的 promise，我們將呼叫 setTimeout() 方法與我們所需的等待時間。之後，我們可以在任何非同步上下文裡面隨意呼叫那個 delay 函式。
function delay(n) {
return new Promise(function(resolve) {
setTimeout(resolve, n * 1000);
});
}
async function myAsyncFunction() {
// Do what you want here
console.log('Before the delay')
await delay(5);
console.log('After the delay')
// Do what you want here too
}
myAsyncFunction();
輸出：
Before the delay
After the delay
延遲函式也可以使用 ECMAScript 6 中的箭頭語法進行優化，如下例。
const delay = (n) => new Promise(r => setTimeout(r, n * 1000));
使用 for 迴圈來實現 JavaScript 中的同步 delay 函式
假設我們沒有任何非同步上下文來使用上面的 delay() 函式，或者不想使用 setTimeout() 函式。在這種情況下，我們可以用普通的 for 迴圈和 Date() 類實現一個同步延遲函式來計算時間。
這個函式的實現非常簡單。就是讓 CPU 在所需時間內保持忙碌。這是通過計算經過的時間，並將其與等待時間進行比較，這樣我們就可以在它之後繼續執行。
function syncDelay(milliseconds) {
var start = new Date().getTime();
var end = 0;
while ((end - start) < milliseconds) {
end = new Date().getTime();
}
}
console.log('Before the delay')
syncDelay(5000);
console.log('After the delay')
輸出：
Before the delay
After the delay