html页面睡眠函数,JavaScript sleep睡眠函数

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);

}

复制代码

参考文章：