1.sleep函数
JavaScript是单线程运行的，没有内置的sleep函数，现在模拟实现sleep延迟执行的效果。
使用睡眠函数实现红绿灯代码，红灯2秒，黄灯1秒，绿灯3秒，循环改变颜色。
2. setTimeout
直接使用setTimeout实现sleep()的方法，兼容性最好，但是使用了回调函数的实现方式，代码的可读性和维护性不是很好。
// setTimeout
let fun = () => console.log('time out');
let sleep = function(fun,time){
setTimeout(()=>{
fun();
},time);
}
sleep(fun,2000);
setTimeout
setTimeout是最基本的实现方式，代码如下，使用递归来实现循环改变颜色：
function changeColor(color) {
console.log('traffic-light ', color);
}
function main() {
changeColor('red');
setTimeout(()=>{
changeColor('yellow');
setTimeout(() => {
changeColor('green');
setTimeout(main, 2000);
}, 1000);
}, 2000);
}
main();
3.Promise
在ES6的语法中，Promise是sleep方法异步的实现一种方式，借助Promise方法可以优雅的构建sleep实现方法，避免了使用函数回调的使用方式。
// promise
let fun = () => console.log('time out');
let sleep2= (time)=> new Promise((resolve)=>{
setTimeout(resolve,time)
})
sleep2(2000).then(fun);
Promise
使用Promise，把下一次的颜色改变写在then里面，最后同样使用递归完成循环。
使用promise代替setTimeout，利用链式调用以及then来实现灯的转换，then返回一个promise对象，当这个对象为resolve状态then可以持续调用。
const traffic_light=(color,duration)=>{
return new Promise((resolve,reject)=>{
console.log('traffic-light ', color);
setTimeout(()=>{
resolve()
},duration)
})
}
const main=()=>{
Promise.resolve()
.then(()=>{
return traffic_light('red',3000)
})
.then(()=>{
return traffic_light('yellow',1000)
})
.then(()=>{
return traffic_light('green',2000)
})
.then(()=>{
main();
})
}
main()
4. async await
async await实际上是generator和promise的语法糖，在提供同步编程方式实现异步调用的基础上，同时满足对sleep函数语义化的支持，也是常用的sleep的实现方式。
// async await
async function wait(time){
await sleep2(time);
fun();
}
wait(3000);
async await 使用
使用async await就可以避免Promise的一连串.then.then.then，也不再需要递归，使用while(true)就可以实现循环。
function sleep(duration) {
return new Promise(resolve => {
setTimeout(resolve, duration);
})
}
async function changeColor(color, duration) {
console.log('traffic-light ', color);
await sleep(duration);
}
async function main() {
while (true) {
await changeColor('red', 2000);
await changeColor('yellow', 1000);
await changeColor('green', 3000);
}
}
main();
5. 1s后输出1 2s后输出2 3s后输出3
const log = console.log;
const sleep = (timeout) => {
return new Promise((resolve)=>{
setTimeout(()=>{
resolve();
}, timeout)
})
}
const main = async()=>{
await sleep(1000);
log(1);
await sleep(2000);
log(2);
await sleep(3000);
log(3);
}
参考文章：
红绿灯
红绿灯
到此这篇关于JavaScript sleep睡眠函数的使用的文章就介绍到这了,更多相关JavaScript sleep睡眠函数内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！