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>