js如何优雅的sleep

更新时间: 2022-06-23 10:02:02

项目开发中，会遇到有的地方需要暂停一小段时间的情况，比如说下载用canvas渲染的图片，canvas渲染需要时间，在渲染出来前暂停一小段时间下载出来的图片不会出错。

但通常我们会写如下的代码：

setTimeout(() => {
    //do something
},delay)

1
2
3

这样写很便利，但假如我要实现的是这样的场景呢？

setTimeout(() => {
    //do something
    setTimeout(() => {
        //do something else
    },1000)
},1000)

1
2
3
4
5
6

是不是很死亡，接下来改造一下：

# 利用 async await 优雅sleep

async function sleep(delay) {
    return new Promise((resolve) => setTimeout(resolve,delay))
}

1
2
3

然后上面的情况就可以这样写：

await sleep(1000)
//do something
await sleep(1000)
//do something else

1
2
3
4