「一起造轮子」如何实现一个伪sleep函数?

334 阅读1分钟

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

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

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

一想到回调地域

诶💡

那我们是不是可以往promiseasync 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函数还有什么其它作用呢?

实现异步的循环打印

假如希望每隔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));
}

参考资料(扩展阅读)