脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS实现sleep、wait、delay延时功能

JS中实现类似sleep、wait、delay的延时功能实例代码

 更新时间：2025年05月20日 09:50:17   作者：Naisu Xu  
JavaScript中没有内置的sleep()函数来实现延时操作,但是可以使用setTimeout()函数来模拟实现延时效果,这篇文章主要介绍了JS中实现类似sleep、wait、delay的延时功能,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

编写代码时很多时候需要进行流程化的操作，各个流程间通常需要等待一定时间，这在很多语言中通常可以使用 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>

总结 

到此这篇关于JS中实现类似sleep、wait、delay的延时功能的文章就介绍到这了,更多相关JS实现sleep、wait、delay延时功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 微信小程序四种弹窗方式实例

    微信小程序四种弹窗方式实例

    微信小程序弹窗是小程序在需要提示用户的时候,显示的一种交互形式,下面这篇文章主要给大家介绍了关于微信小程序四种弹窗方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • bootstrapfileinput实现文件自动上传

    bootstrapfileinput实现文件自动上传

    这篇文章主要介绍了bootstrapfileinput实现文件自动上传,bootstrap fileinput插件对多种类型的文件提供文件预览，并且提供了多选等功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 基于slideout.js实现移动端侧边栏滑动特效

    基于slideout.js实现移动端侧边栏滑动特效

    这篇文章主要为大家详细介绍了基于slideout.js实现移动端侧边栏滑动特效,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JS中 new Date() 各方法的用法说明

    JS中 new Date() 各方法的用法说明

    这篇文章主要介绍了JS中 new Date() 各方法的用法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • 微信小程序去除左上角返回键的实现方法

    微信小程序去除左上角返回键的实现方法

    这篇文章主要介绍了微信小程序去除左上角返回键的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • CodeMirror实现代码对比功能(插件react vue)

    CodeMirror实现代码对比功能(插件react vue)

    这篇文章主要介绍了CodeMirror实现代码对比功能,用到的插件有vue或者react都需要这一步且同样的下载方式，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-05-05
  • 微信小程序获取微信运动步数的实例代码

    微信小程序获取微信运动步数的实例代码

    本篇文章主要介绍了微信小程序微信运动步数的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • js导出excel文件的简洁方法(推荐)

    js导出excel文件的简洁方法(推荐)

    下面小编就为带来一篇js导出excel文件的简洁方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 微信小程序返回上一页的各种方法实例

    微信小程序返回上一页的各种方法实例

    在开发小程序的时候我们总是能遇到各种奇怪的需求,下面这篇文章主要给大家介绍了关于微信小程序返回上一页的各种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • 微信小程序input框中加入小图标的实现方法

    微信小程序input框中加入小图标的实现方法

    这篇文章主要介绍了微信小程序input框中加入小图标的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06

最新评论