在 JavaScript 中等待 X 秒
Moataz Farid
2023年1月30日
2020年12月19日
-
在 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