JS中实现类似sleep、wait、delay的延时功能实例代码
作者：Naisu Xu
JavaScript中没有内置的sleep()函数来实现延时操作,但是可以使用setTimeout()函数来模拟实现延时效果,这篇文章主要介绍了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>总结
到此这篇关于JS中实现类似sleep、wait、delay的延时功能的文章就介绍到这了,更多相关JS实现sleep、wait、delay延时功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！