JavaScript封装异步操作setTimeout成Sleep

最新推荐文章于 2024-05-16 15:12:29 发布

原创

最新推荐文章于 2024-05-16 15:12:29 发布 · 690 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #多线程 #vue

本文介绍了如何在JavaScript中封装异步操作setTimeout为Sleep函数，通过Promise和async/await实现延迟执行的效果，详细探讨了JavaScript的单线程、事件循环机制以及同步和异步任务的概念。

JavaScript封装异步操作setTimeout成Sleep

文章目录

JavaScript封装异步操作setTimeout成Sleep
- 1 前言
- 2 采用Promise和async/await进行setTimeout的封装

1 前言

JavaScript是单线程语法，没有语言内置的休眠（sleep or wait）函数，所谓的sleep只是实现一种延迟执行的效果。
遵循事件循环机制，当JS解析执行时，会被引擎分为两类任务，同步任务（synchronous）和异步任务（asynchronous）。
- 对于同步任务来说，会被推到执行栈按顺序去执行这些任务。
- 对于异步任务来说，当其可以被执行时，会被放到一个任务队列（task queue）里等待JS引擎去执行。
当执行栈中的所有同步任务完成后，JS引擎才会去任务队列里查看是否有任务存在，并将任务放到执行栈中去执行，执行完了又会去任务队列里查看是否有已经可以执行的任务。这种循环检查的机制，就叫做事件循环(Event Loop)。

2 采用Promise和async/await进行setTimeout的封装

这里首先采用了Promise对setTimeout进行封装

function sleepFun(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      //console.log("sleepTest!");
      resolve()
    }, time)
  })
}

这里需要提到的一个问题是，这个sleep()在执行的时候是“block”程序的继续执行的。它不是同步的。如果想让它同步执行，不妨碍执行之后的代码，我们可以使用 async/await 关键字。