JavaScript没有sleep功能,但是我们可以通过这种方式轻松解决!

为了让你的浏览器进入睡眠状态,只需写入这行代码:

1
await new Promise((_) => setTimeout(_, 2000));

这将使浏览器休眠 2 秒(2000 毫秒)。

请注意,它仅适用于现代浏览器(> 2017)!请参阅 caniuse.com 上 await 的浏览器兼容性。

让我们创建一个可重复使用的睡眠函数

1
const sleep = (ms = 2000) => new Promise((_) => setTimeout(_, ms));

或者用更古老的符号表示:

1
2
3
4
5
function sleep(ms = 2000) {
return new Promise(function (_) {
return setTimeout(_, ms);
});
}

如果你想探索 Promise 的其他功能,你可以浏览 MDN Doc

如何使用

1
2
3
4
5
console.log(`Let's wait for 5s`);

await sleep(5000); // 5000ms = 5seconds

console.log(`5s have passed`);

控制台中的结果:

1
2
3
> Let's wait for 5s
[waiting for 5 seconds]
> 5s have passed

顶级 await 问题

在某些旧浏览器/节点版本中,使用顶级 await 可能不起作用。为了解决这个问题,我们可以用立即调用的异步函数包装我们的代码。

1
2
3
4
5
6
7
(async function () {
console.log(`Let's wait for 5s`);

await sleep(5000);

console.log(`5s have passed`);
})();

旧浏览器中的 sleep 函数
关于旧浏览器中的 sleep 函数,请注意:它通常是这样编写的,但绝对不是“性能友好型”。

1
2
3
4
5
6
7
function sleep(mss) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}