快捷導(dǎo)航

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

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

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

前言

編寫(xiě)代碼時(shí)很多時(shí)候需要進(jìn)行流程化的操作，各個(gè)流程間通常需要等待一定時(shí)間，這在很多語(yǔ)言中通?？梢允褂?nbsp;sleep 、 wait 、 delay 等函數(shù)來(lái)實(shí)現(xiàn)。JavaScript原生并沒(méi)有類似的功能，想要延時(shí)通常就是使用 setTimeout(functionRef, delay) 方法。該方法使用比較簡(jiǎn)單，但是當(dāng)一個(gè)流程中如果需要多次延時(shí)，就會(huì)出現(xiàn)回調(diào)地獄：

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

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

實(shí)現(xiàn)代碼

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

// 實(shí)現(xiàn)sleep功能，使用方式下面方式調(diào)用
// 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>
        // 實(shí)現(xiàn)sleep功能，使用方式下面方式調(diào)用
        // 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>

總結(jié)

到此這篇關(guān)于JS中實(shí)現(xiàn)類似sleep、wait、delay的延時(shí)功能的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)sleep、wait、delay延時(shí)功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: