使用 async-await 实现一个重复等待事务函数

使用 async-await 实现一个重复等待事务函数

ES6 之后 JavaScript 标准规范提供 Promise, async, await 方法处理异步事务。

如何实现一个函数,使得 repeat(() => {console.log('1')}, 5, 2000) 每两秒执行一次打印,总共五次?

这个问题当然不难,使用定时器就可以了,基本上会写 JS 的同学都能解决这个问题。在 ES2017 之前,实现方法也有很多,但现在都 9102 年了,如果是我来实现的话,基本上毫不犹豫写下面的代码:

function wait(millisecond) {
  return new Promise((resolve) => {
    setTimeout(resolve, millisecond);
  });
}

async function repeat(task, count = 1, millisecond = 0) {
  while (count--) {
    await wait(millisecond);
    task();
  }
}

为什么这样写呢?因为这个代码结构极其简单,while 循环基本上学过程序开发的新手都能理解,只要再了解一下 async/await 的语义(实际上猜都能猜到),就能彻底明白代码的含义:

while (count--) {
  await wait(millisecond);
  task();
}

循环 count 次,每次 wait 若干毫秒,这个代码逻辑简单到不需要任何注释。

使用也非常方便,因为它自身是 async 的函数,返回 promise,所以如果我们需要等待执行完成后执行其他任务,只需要放到 async 函数中并加上 await

(async function () {
  await repeat(taskA, 5, 2000);
  taskB();
})();

反之,如果我们希望任务同步执行,只需要去掉 await

repeat(taskA, 5, 2000);
taskB();

如果我们希望 A、B 都重复若干次,且 A、B 先后依次执行:

await repeat(taskA, 5, 2000);
await repeat(taskB, 5, 2000);

如果我们希望 A、B 都重复若干次,且并行执行:

await Promise.all([repeat(taskA, 5, 2000), repeat(taskB, 5, 2000)]);

如果我们希望 taskA、taskB 也可以是异步方法,可以稍微修改一下 repeat 实现:

async function repeat(task, count = 1, millisecond = 0) {
  while (count--) {
    await wait(millisecond);
    await task();
  }
}

总之,代码是给人阅读的,在 ES2017 之后,JavaScript 支持了async 函数,请大家在处理异步操作时,使用 async 函数,这样能够写出简洁的,让人非常容易阅读和理解的代码来。

本文作者 akira-cn,转载请注明来源链接:

原文链接:https://github.com/akira-cn/FE_You_dont_know/issues/15

本文链接:https://tie.pub/2019/09/repeat-wait/