JavaScript中sleep睡眠函数怎样实现和使用?
Admin 2021-09-07 群英技术资讯 1021 次浏览
这篇文章主要给大家分享JS实现sleep睡眠函数的内容,我们知道JavaScript因为是单线程运行,所以没有内置的sleep函数,因此这些朋友就不太了解JavaScript sleep睡眠函数的实现,对此下面小编就给大家来介绍一下。
JavaScript是单线程运行的,没有内置的sleep函数,现在模拟实现sleep延迟执行的效果。
使用睡眠函数实现红绿灯代码,红灯2秒,黄灯1秒,绿灯3秒,循环改变颜色。
直接使用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();
在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()
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();
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); }
现在大家对于JS中sleep函数的实现和使用都有所了解了吧,上述示例有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家有帮助,想要了解更多大家可以关注群英网络其它相关文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
yield关键字只能用于生成器函数,它表示暂停函数内部代码的执行,并返回当前迭代数据。如果没有下一个yield,next返回对象的done将被放置为true。
JavaScript ES6 Class类实现原理详解,JavaScript ES6之前的还没有Class类的概念,生成实例对象的传统方法是通过构造函数。
JavaScript中wrap的意思是“包裹”,wrap()方法用于指定的 HTML元素来包裹每个被选元素,语法为“元素对象.wrap(wrappingElement,function(index))”。
这篇文章主要为大家介绍了Vue3插槽Slot实现原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
这篇文章给大家分享的是jQuery怎么取消hover事件的方法。在实际的项目中,我们常常需要用jquery去响应鼠标的hover事件,所以掌握绑定和取消hover事件是很基础的,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008