给 setTimeout、setInterval 配备 await 写法

最新推荐文章于 2025-04-27 10:07:29 发布

关于0318

最新推荐文章于 2025-04-27 10:07:29 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/csdn372301467/article/details/116045120

web前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在JavaScript中为setTimeout和setInterval配备await语法，使得异步操作更加直观。通过引入名为'丑丑仔'的工具，可以实现代码的简洁写法，避免重复封装。文中提供了一系列示例，包括程序暂停、定时执行任务等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setTimeout、setInterval 是两个常用的异步函数。
但作为异步函数，他们不支持 Promise或者 async/await写法。
代码写起来：

setTimeout(() => {
  console.log('执行一些操作')
  setTimeout(() => {
    console.log('执行另一些操作')
    // setTimeout ...
  }, 3000)
}, 1000)

不好看！

尽管经过简单的封装，可以达到目的，但每次用到都封装一次——重复造轮子。
本篇介绍一个使用起来很方便的轮子：丑丑仔。

使用

安装

npm install ccz

例子

程序“暂停”一秒

const timeoutP = require('ccz/timeout')

async function main(){
  console.log('开始')
  await timeoutP(1000)
  console.log('一秒之后')
  await timeoutP(2000)
  console.log('又过了两秒')
}

main()

每秒一次，共三次

const intervalP = require('ccz/interval')

async function main(){
  console.log('开始')
  await intervalP(1000, 3, () => {
    console.log('哈哈')
  })
  console.log('结束')
}

main()

先停一秒，再每秒执行一次，执行两次；再停两秒，每半秒执行一次，执行三次，再等一秒！

const { timeoutP, intervalP } = require('ccz')

async function main(){
  console.log('开始')
  await timeoutP(1000) // 等一秒
  await intervalP(1000, 2, () => {
    console.log('每秒一次，共两次')
  })
  
  await timeoutP(2000) // 等两秒
  await intervalP(500, 3, () => {
    console.log('每半秒一次，共三次')
  })
  await timeoutP(1000) // 等一秒
  
  console.log('结束')
}

main()

一秒执行 24 次

const withoutIntervalP = require('ccz/without-interval')

async function main(){
  console.log('开始')
  await withoutIntervalP(1000, 24, () => {
    console.log('换帧')
  })
  console.log('结束')
}

main()

仓库链接，点这里