JavaScript sleep睡眠函数的使用

 更新时间:2021年07月08日 15:34:25   作者:进击的大羊  
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);
}

参考文章:

红绿灯
红绿灯

到此这篇关于JavaScript sleep睡眠函数的使用的文章就介绍到这了,更多相关JavaScript sleep睡眠函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • js canvas实现圆角图片

    js canvas实现圆角图片

    这篇文章主要为大家详细介绍了js canvas实现圆角图片效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • javascript写一个ajax自动拦截并下载数据代码实例

    javascript写一个ajax自动拦截并下载数据代码实例

    这篇文章主要介绍了javascript写一个ajax自动拦截并下载数据代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • js进阶语法之变量提升、函数提升以及参数的命名冲突问题解决

    js进阶语法之变量提升、函数提升以及参数的命名冲突问题解决

    JavaScript代码在执行前会经历一个预处理阶段,这个阶段主要涉及变量提升和函数提升,下面这篇文章主要介绍了js进阶语法之变量提升、函数提升以及参数的命名冲突问题解决的相关资料,需要的朋友可以参考下
    2024-09-09
  • 微信jssdk踩坑之签名错误invalid signature

    微信jssdk踩坑之签名错误invalid signature

    这篇文章主要介绍了微信jssdk踩坑之签名错误invalid signature,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • js中map()函数的使用案例详解

    js中map()函数的使用案例详解

    map()方法定义在JavaScript的Array中,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值,这篇文章主要介绍了js中map()函数的使用,需要的朋友可以参考下
    2022-11-11
  • 前端导出word文件的多种方式以及导出excel文件

    前端导出word文件的多种方式以及导出excel文件

    导出功能是项目开发中经常会遇到的需求,在此就前端方面需要做的部分做一个总结,这篇文章主要给大家介绍了关于前端导出word文件的多种方式以及导出excel文件的相关资料,需要的朋友可以参考下
    2024-08-08
  • JS消息弹框alert、confirm、prompt的实现代码

    JS消息弹框alert、confirm、prompt的实现代码

    这篇文章主要介绍了JS消息弹框alert、confirm、prompt,文中还给大家介绍了js的三大基础弹框,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • chrome不支持form.submit的解决方案

    chrome不支持form.submit的解决方案

    最近在解决项目中网站浏览器兼容性问题,发现chrome竟然不支持form.submit,经网上搜寻,终于找到了解决方案,有需要的小伙伴参考下。
    2015-04-04
  • JS实现数组随机排序的三种方法详解

    JS实现数组随机排序的三种方法详解

    这篇文章主要为大家详细介绍了JavaScript中实现数组随机排序的三种方式,文中的示例代码讲解详细,对我们学习或工作有一定参考价值,需要的可以参考一下
    2022-05-05
  • JavaScript 中 this 关键字的作用及改变其上下文的方法

    JavaScript 中 this 关键字的作用及改变其上下文的方法

    这篇文章主要介绍了JavaScript 中 this 关键字的作用和如何改变其上下文,通过使用 call, apply, bind 方法,可以改变函数中的 this 指向,从而在不同的上下文中使用同一个函数,需要的朋友可以参考下
    2023-01-01

最新评论