JavaScript中sleep睡眠函数怎样实现和使用？
发布时间：2022-02-22 13:36:06 所属栏目：语言 来源：互联网
导读：这篇文章主要给大家分享JS实现sleep睡眠函数的内容，我们知道JavaScript因为是单线程运行，所以没有内置的sleep函数，因此这些朋友就不太了解JavaScript sleep睡眠函数的实现，对此下面小编就给大家来介绍一下。 1.sleep函数 JavaScript是单线程运行的，没有
|
这篇文章主要给大家分享JS实现sleep睡眠函数的内容，我们知道JavaScript因为是单线程运行，所以没有内置的sleep函数，因此这些朋友就不太了解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); } （编辑：安阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
