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); }
参考文章:
到此这篇关于JavaScript sleep睡眠函数的使用的文章就介绍到这了,更多相关JavaScript sleep睡眠函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
js中offset,client , scroll 三大元素知识点总结
在本篇文章里小编给大家整理了关于js 元素offset,client , scroll 三大系列总结,有需要的朋友们可以学习下。2019-09-09微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
这篇文章主要介绍了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法,较为详细的分析了预览图片接口及与拍照或手机相册中选图接口的功能、调用方法与相关使用技巧,需要的朋友可以参考下2016-10-10使用bootstrapValidator插件进行动态添加表单元素并校验
动态添加表单元素,并调用bootstrapValidator的方法为表单添加校验规则,调用addField()方法实现功能。下面通过本文看下具体实现方法吧2016-09-09Rxjs map, mergeMap 和 switchMap 的区别与联系
这篇文章主要介绍了Rxjs map,mergeMap和switchMap的区别与联系,map、mergeMap和switchMap是RxJS中的三个主要运算符,在SAP Spartacus开发中有着广泛的使用场景2022-07-07javascript中$(function() {});写与不写有哪些区别
javascript中$(function() {....}) 是jQuery中的经典用法,等同于 $(document).ready(function() {....}) javascript中$(function() {});写与不写有哪些区别,需要的朋友可以参考下2015-08-08
最新评论