JS中實現(xiàn)類似sleep、wait、delay的延時功能實例代碼

更新時間：2025年05月20日 09:50:17 作者：Naisu?Xu

JavaScript中沒有內置的sleep()函數(shù)來實現(xiàn)延時操作,但是可以使用setTimeout()函數(shù)來模擬實現(xiàn)延時效果,這篇文章主要介紹了JS中實現(xiàn)類似sleep、wait、delay的延時功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

編寫代碼時很多時候需要進行流程化的操作，各個流程間通常需要等待一定時間，這在很多語言中通常可以使用 sleep 、 wait 、 delay 等函數(shù)來實現(xiàn)。JavaScript原生并沒有類似的功能，想要延時通常就是使用 setTimeout(functionRef, delay) 方法。該方法使用比較簡單，但是當一個流程中如果需要多次延時，就會出現(xiàn)回調地獄：

setTimeout(() => {
    console.log(`first print`);
    setTimeout(() => {
        console.log(`second print`);
        setTimeout(() => {
            console.log(`third print`);
        }, 1000);
    }, 1000);
}, 1000);

這種寫法代碼可讀性和可維護性非常差，這種應用場景下使用很多支持多線程的語言中的延時函數(shù)就會方便很多?，F(xiàn)在JS中加入了很多新的語法功能，可以方便的改造現(xiàn)有方法來實現(xiàn)類似其他語言中 sleep 、 wait 、 delay 的功能。

實現(xiàn)代碼

具體的實現(xiàn)方法可能有非常多種，這里使用 Promise 、async/await 來實現(xiàn)相關功能，主要代碼如下：

// 實現(xiàn)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>
        // 實現(xiàn)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>