Javascript中的forEach和parallel是什么？

Question

我希望能够同时对数组中的所有元素应用一个函数，而不是逐个顺序应用。这是因为我有一个大型元素数组，并且想要同时在画布上绘制它们。我正在使用Angular 6。

我有以下代码：

 drawRow(row: Node[]) {
    row.forEach((item) => {
      this.addToCanvas(item);
    });
 }

我想要并行地将一行中的所有元素添加到canvas中。

需要安装某些库才能做到这一点吗？还是可以仅使用纯JavaScript实现？

哪种方法是正确的？

提前感谢 =)

- Kimy BF

---

问题不仅在于循环是否可以并行，还在于画布是否可以并行。 - GolezTrol

JavaScript 大多数情况下是单线程的。语言中没有类似并行操作的功能。 - Pointy

顺便提一下，如果你需要在画布上绘制大量的东西，可以从Paper.js中获得一些灵感。 - GolezTrol

你可以使用Web Workers，在这里有一篇文章，提供了一个相关示例（绘制到画布）https://kenhalbert.com/posts/parallelization-with-web-workers - Robbie Milejczak

如果你的真正问题是不想让所有项目一个接一个地出现，你可以在一个隐藏的画布上绘制它们。当它们全部完成时，你可以一次性将整个隐藏的画布复制到实际画布上。 - Kokodoko

Answer 1

正如Pointy在评论中提到的那样，Javascript大多数情况下是单线程的。

如果你因为画布太大而发现有延迟，你可以将addToCanvas方法返回一个Promise对象。 它将推迟这些函数的调用，在每个调用之间允许页面进行交互。

如果你需要在所有"addToCanvas"调用之后做一些事情，可以使用Promise.all()

要真正并行工作，你需要使用WebWorker，但这些有限制。它们无法访问DOM，并且只能通过异步消息API进行交互。 根据您的需求，这可能是一个解决方案。如果你想在后台进行长时间的计算，它非常有用。

- Félix Brunet