JavaScript 中的异步循环

虽然 JavaScript 提供了各种类型的循环，但是可以创建暂停执行以等待异步调用的循环具有挑战性的。这是因为混合同步和异步代码可能会导致意外行为。

解决方案：采用异步方法

要克服此限制，有必要完全拥抱事件JavaScript 驱动的方法。这涉及使用异步调用完成时将调用的函数。调用回调后，循环可以继续执行。

引入 asyncLoop 函数

可以创建一个名为 asyncLoop 的辅助函数来促进这种异步循环行为。它需要三个参数：

• iterations：循环应运行的次数。
• func：每次迭代中执行的函数。
• callback：循环完成时调用的函数。

asyncLoop 函数维护一个内部变量索引来跟踪当前迭代，并标记一个 did 变量来指示循环何时完成。在该函数中，有一个内部循环对象提供以下方法：

• next()：使循环前进一次迭代。
• iteration()：返回当前迭代。
• break()：提前终止循环。

要启动循环，将调用loop.next()。每次调用 func 函数时，可以调用loop.next() 继续循环，或调用loop.break() 终止循环。

用法示例：

以下示例演示如何使用 asyncLoop 函数创建异步循环：

asyncLoop(10, (loop) => {
  someFunction(1, 2, (result) => {
    console.log(loop.iteration());
    loop.next();
  });
}, () => {
  console.log('cycle ended');
});

此代码将异步执行 someFunction 10 次，并在控制台中记录迭代次数。循环完成时将打印循环结束消息。

通过利用这种方法，JavaScript 开发人员可以创建在事件驱动环境中无缝工作的异步循环，避免阻塞脚本和浏览器的潜在问题。