前言
編寫代碼時很多時候需要進行流程化的操作，各個流程間通常需要等待一定時間，這在很多語言中通常可以使用 sleep 、 wait 、 delay 等函數來實現。JavaScript原生并沒有類似的功能，想要延時通常就是使用 setTimeout(functionRef, delay) 方法。該方法使用比較簡單，但是當一個流程中如果需要多次延時，就會出現回調地獄：
setTimeout(() => {console.log(`first print`);setTimeout(() => {console.log(`second print`);setTimeout(() => {console.log(`third print`);}, 1000);}, 1000);
}, 1000);
這種寫法代碼可讀性和可維護性非常差，這種應用場景下使用很多支持多線程的語言中的延時函數就會方便很多。現在JS中加入了很多新的語法功能，可以方便的改造現有方法來實現類似其他語言中 sleep 、 wait 、 delay 的功能。
實現代碼
具體的實現方法可能有非常多種，這里使用 Promise 、async/await 來實現相關功能，主要代碼如下：
// 實現sleep功能，使用方式下面方式調用
// async function process(){
// // your code ...
// await sleep(1000);
// // your code ...
// }
function sleep(ms) {return new Promise((resolve, reject) => {setTimeout(() => {resolve();}, ms);});
}
使用演示
上面演示中使用的完整代碼如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>test</title><script>function getTimeStr(params) {let now = new Date();let year = now.getFullYear();let month = String(now.getMonth() + 1).padStart(2, '0');let day = String(now.getDate()).padStart(2, '0');let hours = String(now.getHours()).padStart(2, '0');let minutes = String(now.getMinutes()).padStart(2, '0');let seconds = String(now.getSeconds()).padStart(2, '0');let milliseconds = String(now.getMilliseconds()).padStart(3, '0');let formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;return formattedTime;}</script><script>// 實現sleep功能，使用方式下面方式調用// async function process(){// // your code ...// await sleep(1000);// // your code ...// }function sleep(ms) {return new Promise((resolve, reject) => {setTimeout(() => {resolve();}, ms);});}</script><script>(async () => {await sleep(1000);console.log(`${getTimeStr()} > first print`);await sleep(1000);console.log(`${getTimeStr()} > second print`);await sleep(1000);console.log(`${getTimeStr()} > third print`);})()</script>
</head><body></body></html>
