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
您可能感兴趣
- JavaScriptSerializer对Json对象的序列化和反序列化
- javascript数组实例扩展方法(JavaScript如何监测数组的变化)
- javascript类型转换
- js防抖用法(JavaScript的防抖和节流案例)
- JavaScript中使用concat合并数组
- javascript变量值做函数名(JavaScript中变量提升和函数提升实例详解)
- 浏览器怎么显示javascript页面(JavaScript如何通过userAgent判断几个常用浏览器详解)
- javascript制作表格(JavaScript实现动态表格效果)
- 用css实现图片特效代码(HTML+CSS+JavaScript实现图片3D展览的示例代码)
- js回调函数原理(关于JavaScript回调函数的深入理解)
- javascript如何判断类型(JavaScript如何优化逻辑判断代码详解)
- javascript文件解压(JavaScript 如何在线解压 ZIP 文件)
- hashtable的javascript实现
- Javascript计算密码的强度
- jsfor循环是什么意思(JavaScript中三种for循环语句的使用总结for、for...in、for...of)
- javascript 自带格式化时间(JavaScript内置日期、时间格式化时间实例代码)
- 虐待儿童是发泄支配欲的愚蠢行为(虐待儿童是发泄支配欲的愚蠢行为)
- 你或许不知道你隐藏的支配欲望(你或许不知道你隐藏的支配欲望)
- 把宽体丰田86卖了,换成7.5代高尔夫GTI玩起姿态与性能并存的改装(把宽体丰田86卖了)
- 大众推出了第五代高尔夫GT(大众推出了第五代高尔夫GT)
- 换代在即,现在是抄底 7.5代 高尔夫的最佳时机吗(换代在即现在是抄底)
- 2020年大众7.5代高尔夫R终结特别版 最后的呐喊(2020年大众7.5代高尔夫R终结特别版)
热门推荐
- 阿里云服务器安全组在哪(阿里云服务器安全组设置规则)
- flashfxp使用视频教程(FlashFXP 命令行参数)
- javascript登录转注册界面(JavaScript实现登录窗体)
- docker构建本地镜像(Docker创建本地镜像实现方法解析)
- 如何应对网站安全问题(网站安全有哪些防护措施?)
- laravel设置跨域请求(Laravel实现ApiToken认证请求)
- es6常用的数组方法(ES6中Set与WeakSet集合的深入讲解)
- mysql数据库基本增删改查基本语句(MySQL表的增删改查基础教程)
- mysql8.0.19.0正确安装图解(MySQL 8.0.23 主要更新一览新特征解读)
- .NET中对枚举的操作
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9