通过异步 JavaScript 进行循环 -1

在JavaScript中, 常常需要进行循环操作, 以遍历, 过滤, 渲染等等, 但是如果数据量很大, 操作就会变得很慢, 阻塞UI线程, 延迟用户的操作体验. 为了解决这个问题, 我们可以使用异步循环的方式进行操作.

一般循环方式的问题

考虑如下的代码段：

for (let i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

如果数据量不大，上述代码是可以工作的. 但是，如果数组arr中的元素非常多，会导致很大的性能问题，阻塞UI线程，导致程序变慢或者崩溃.

使用异步方式进行循环

async function asyncForEach(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
}

上述是异步循环的代码片段. 我们可以把array.forEach(callback)替换成 [asyncForEach(array, callback]).

下面是具体操作的代码片段：

async function loop() {
  const arr = [1,2,3,4,5,6,7,8,9,10];
  await asyncForEach(arr, async (num) => {
    console.log(num);
  });
  console.log('Done');
}

loop();

输出结果：

1
2
3
4
5
6
7
8
9
10
Done

由上述输出结果可以看到, "Done"信息在整个异步循环操作结束以后输出.

异步循环中使用 Promise.all

当异步操作完成后，我们可能还需要在回调函数中继续进行其他异步操作。 在这种情况下，我们可以将一个异步操作数组传递到 Promise.all 方法中，以等待所有操作完成。

async function asyncForEach(array, callback) {
  const promises = [];
  for (let index = 0; index < array.length; index++) {
    promises.push(callback(array[index], index, array));
  }
  await Promise.all(promises);
}

上面的代码片段并不会保证异步操作的顺序，但是会保证所有的异步操作在异步循环完成之前全部完成。

结论

使用异步循环可以解决很多性能问题，能够保证前端用户的操作体验，并且增加程序的稳定性。同时，在异步操作中使用 Promise.all 能够更好的保证操作的顺序和稳定性。