javascript 函数生命周期(JavaScript sleep睡眠函数的使用)
类别:编程学习 浏览量:1118
时间:2021-10-12 00:22:36 javascript 函数生命周期
JavaScript sleep睡眠函数的使用目录
- 1.sleep函数
- 2. setTimeout
- 3.Promise
- 4. async await
- 5. 1s后输出1 2s后输出2 3s后输出3
- 参考文章:
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); }
红绿灯
红绿灯
到此这篇关于JavaScript sleep睡眠函数的使用的文章就介绍到这了,更多相关JavaScript sleep睡眠函数内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
标签:JavaScript sleep
您可能感兴趣
- qt和js相互调用(QT与javascript交互数据的实现)
- javascript 数据分析(利用JavaScript差集实现一个对比小工具)
- javascript的作用域详解精简版(浅谈JavaScript 中的延迟加载属性模式)
- web前端快速入门之html(Web前端开发规范2017HTML/JavaScript/CSS)
- js 图片编辑处理库(javascript input图片上传及预览,FileReader预览图片)
- javascript中求二维数组最小值(javascript实现数组最大值和最小值的6种方法)
- 微信小程序抽签如何抽中(JavaScript实现班级抽签小程序)
- javascript文件解压(JavaScript 如何在线解压 ZIP 文件)
- js闭包可以解决哪些问题(JavaScript中let避免闭包造成问题)
- js防抖用法(JavaScript的防抖和节流案例)
- vue走马灯特效(Javascript结合Vue实现对任意迷宫图片的自动寻路)
- javascript对象添加方法(详解JavaScript面向对象实战之封装拖拽对象)
- jquery留言板代码(JavaScript实现留言板添加删除留言)
- Javascript中apply、call、bind
- js的模块模式设计(如何理解JavaScript模块化)
- ASP.NET使用JavaScriptSerializer实现序列化与反序列化
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
- 小米音乐可绑定QQ音乐, QQ音乐 真的会消失在小米的设备上吗(小米音乐可绑定QQ音乐)
- 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑(小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑)
- 手机QQ与小米路由器在一起 明天揭晓,敬请期待(手机QQ与小米路由器在一起)
热门推荐
- python中对象方法和顶级方法(Python3.5面向对象程序设计之类的继承和多态详解)
- html5元素列表(HTML5触摸事件touchstart、touchmove和touchend的实现)
- SVN提交时忽略bin和obj文件夹
- 移动端touch事件
- 前端实现一个自适应的正方形(前端实现背景虚化但内容清晰且自适应 的实例代码)
- python进度条怎么实现(Python小进度条显示代码)
- sql多条件查询汇总语句(SQL判断语句用法和多表查询)
- mysql详细笔记(MySQL的内存表的基础学习教程)
- js使用递归解析(关于JavaScript递归经典案例题详析)
- docker 部署参数配置(Docker部署nGrinder性能测试平台过程解析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9