广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript sleep睡眠函数的使用
  • 606
分享到

JavaScript sleep睡眠函数的使用

2024-04-02 19:04:59 606人浏览 八月长安
摘要

目录1.sleep函数2. setTimeout3.Promise 4. async await5. 1s后输出1 2s后输出2 3s后输出3参考文章:1.sleep函数 java

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睡眠函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网! 

--结束END--

本文标题: JavaScript sleep睡眠函数的使用

本文链接: https://www.lsjlt.com/news/130090.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript sleep睡眠函数的使用
    目录1.sleep函数2. setTimeout3.Promise 4. async await5. 1s后输出1 2s后输出2 3s后输出3参考文章:1.sleep函数 Java...
    99+
    2022-11-12
  • JavaScript sleep睡眠函数的使用方法
    这篇文章主要讲解了“JavaScript sleep睡眠函数的使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript sleep睡眠函数的使用方法”吧!目录sleep函数...
    99+
    2023-06-20
  • JavaScript实现sleep睡眠函数的几种简单方法总结
    目录一.什么是sleep函数?二.为什么使用sleep?三.实现sleep基于Date实现基于Promise的sleep基于Generator函数的sleep基于async函数的sl...
    99+
    2023-01-05
    实现一个sleep函数 js的sleep函数 sleep函数用法
  • shell sleep睡眠命令的具体使用
    目录1. 背景2. 简介3. 语法4. 与 wait 区别5. 实例5.1 设置警报5.2 终端中的延迟命令5.3 变量分配给 sleep5.4 定义检查间隔5.5 为操作完成留出时间5.6 预测延迟1. 背景 当用户在...
    99+
    2023-01-12
    shellsleep命令 shellsleep睡眠命令
  • C语言的sleep、usleep、nanosleep等休眠函数的使用
    目录引子(一) sleep 函数sleep 函数的用法sleep 函数的返回值sleep 函数的参数(二) usleep 函数usleep 函数的用法usleep 函数的返回值usl...
    99+
    2023-03-09
    C语言 sleep usleep nanosleep
  • C语言的sleep、usleep、nanosleep等休眠函数如何使用
    这篇文章主要讲解了“C语言的sleep、usleep、nanosleep等休眠函数如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“C语言的sleep、usleep、nanosleep等...
    99+
    2023-07-05
  • JavaScript中怎么利用sleep函数实现休眠或等待功能
    JavaScript中怎么利用sleep函数实现休眠或等待功能,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Ja使JavaSc...
    99+
    2022-10-19
  • shellsleep睡眠命令的具体使用
    目录1. 背景2. 简介3. 语法4. 与 wait 区别5. 实例5.1 设置警报5.2 终端中的延迟命令5.3 变量分配给 sleep5.4 定义检查间隔5.5 为操作完成留出时...
    99+
    2023-01-12
    shell sleep命令 shell sleep睡眠命令
  • PHP sleep()函数怎么使用
    PHP的sleep()函数用于让程序暂停执行一段时间,可以用来模拟延迟或者控制程序的执行速度。它的使用方法如下:```phpslee...
    99+
    2023-08-09
    PHP sleep()
  • vb中sleep函数如何使用
    在VB中,可以使用`Threading.Thread.Sleep`函数来使程序暂停指定的时间。以下是使用`Threading.Thr...
    99+
    2023-09-27
    vb
  • linux内核sleep函数怎么使用
    在Linux内核中,没有类似于用户空间中的`sleep()`函数。但是,内核提供了一些用于延迟执行的函数和机制,可以实现类似`sle...
    99+
    2023-09-29
    linux
  • C#中的延时函数sleep怎么使用
    本篇内容介绍了“C#中的延时函数sleep怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!C#延时函数sleepsleepusing&...
    99+
    2023-07-02
  • PHP sleep()函数的用法是什么
    PHP中的sleep()函数用于让脚本在指定的时间内暂停执行。可以通过指定暂停的秒数来控制暂停的时间。该函数常用于模拟耗时操作、限制...
    99+
    2023-10-11
    PHP
  • linux中sleep函数的用法是什么
    在Linux中,sleep函数用于暂停程序的执行一段时间,以毫秒为单位。使用方式如下:```C#include unsigned i...
    99+
    2023-08-09
    linux sleep
  • 使用JS实现一个Sleep函数的示例代码
    目录前言1.目标分析2.setTimeout 封装3.Promise 封装4.async/await总结前言 我们都是 JavaScript 是一个单线程语言,单线程有它的好处也有它...
    99+
    2022-11-13
  • 聊聊PHP中die()和sleep()函数的用法
    在上一篇《聊聊PHP中删除字符串的逗号和尾部斜杠的方法》给大家介绍了PHP删除字符串中的逗号以及尾部斜杠的方法,感兴趣的朋友可以去学习了解一下~ 本文也将给大家通过示例来讲解标题所述...
    99+
    2022-11-12
  • 在MySQL中使用sleep函数时需要注意哪些事项
    在MySQL中使用sleep函数时需要注意哪些事项?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。前言MySQL中的系统函数sl...
    99+
    2022-10-18
  • JavaScript函数的使用详解
    目录1. 声明函数2. 调用函数3. 函数的参数4. 函数的返回值5. arguments的使用6. 函数可以调用另外一个函数7. 函数的两种声明方式总结1. 声明函数2. 调用函数...
    99+
    2022-11-12
  • JavaScript函数的使用教程
    目录一、什么是JS的函数二、js函数的定义和调用三、js函数的参数传递和返回值1.参数传递2.返回值一、什么是JS的函数 JavaScript函数类似于java中的方法。 JS中也可...
    99+
    2022-11-13
  • JavaScript的Promise函数怎么使用
    这篇文章主要介绍“JavaScript的Promise函数怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript的Promise函数怎么使用”文...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作