【JS泡面文】如何实现一个sleep函数？

最新推荐文章于 2025-10-28 22:52:03 发布

原创最新推荐文章于 2025-10-28 22:52:03 发布 · 773 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

JS泡面文专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在JavaScript中实现一个模拟sleep效果的函数，避免回调地狱，并展示了如何利用该函数进行异步的循环打印。通过结合Promise和async/await，实现了等待一定时间后再执行后续代码的功能。

如何实现一个sleep函数？

调味料包

我们需要备齐以下👇料包

实现一个sleep函数

泡面时间

但是由于JS单线程的特性，实际上并不能做到真正的sleep（不然挂起了之后，别的代码咋办┓( ´∀` )┏）。

我们所说的sleep多数指的都是在等待一定的毫秒数后执行某个代码。

假如使用setTimeout来做肯定可以，但是假如嵌套了多层，那岂不是就又陷入了回调了么￣へ￣

一想到回调地域

诶💡

那我们是不是可以往promise 和 async await上面靠一靠。。。结合setTimeout一定能搞大事情

用上面的思路来尝试着写一个sleep函数：

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

console.log('你好，半秒后我会回来');
await sleep(500);
console.log('你好，我回来了，再等我半秒');
await sleep(500);
console.log('我准备好了，咱们继续说sleep函数把');

下面我们在控制台测试一下上面的代码

控制台输出

此时我们发现，每一段代码都间隔了500ms才输出，此时我们已经达成了我们的目标！

将下面👇的调料包放入泡面

完成了一个sleep函数。

加餐时间

sleep函数还有什么其它作用呢？

实现异步的循环打印

假如希望每隔1s，按照从0到5的顺序，输出一个数字，此时应该怎么做？

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function count() {
    for (let i = 0; i < 6; i++) {
        await sleep(1000);
        console.log(i)
    }
}

count();

揭开泡面盖

sleep函数的实现为

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}