typescript - forEach parallel in Javascript? - Stack Overflow

admin管理员组

文章数量:1289509

I want to apply a function to all elements in an array at the same time, I dont want to apply it one by one, I mean, sequentially. Its because I have a big array of elements and I want to draw them in a Canvas at the same time. Im working with Angular 6.

I have this:

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

I want to add to the canvas all the elements of the row in parallel. Is necessary to install some library to do this or can I do this just with pure javascript...? What would be the correct approach to this ?

Thank you in advance =)

I want to apply a function to all elements in an array at the same time, I dont want to apply it one by one, I mean, sequentially. Its because I have a big array of elements and I want to draw them in a Canvas at the same time. Im working with Angular 6.

I have this:

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

I want to add to the canvas all the elements of the row in parallel. Is necessary to install some library to do this or can I do this just with pure javascript...? What would be the correct approach to this ?

Thank you in advance =)

• javascript
• typescript

Share Improve this question Follow asked Aug 15, 2018 at 18:27 Kimy BFKimy BF 1,07933 gold badges1313 silver badges2323 bronze badges 5

• 1 The question is not only if the loop can be parallel, but also if the canvas can be parallel. – GolezTrol Commented Aug 15, 2018 at 18:30
• 4 JavaScript is, for the most part, single-threaded. There are no parallel operations like that in the language. – Pointy Commented Aug 15, 2018 at 18:32
• 2 Btw, for drawing lots of stuff on a canvas, you might draw (haha) some inspiration from Paper.js. – GolezTrol Commented Aug 15, 2018 at 18:32
• 1 You could use web workers, here's an article with a sort of relevant example (drawing to a canvas) kenhalbert./posts/parallelization-with-web-workers – Robbie Milejczak Commented Aug 15, 2018 at 18:35
• If your real problem is that you just don't want all items to appear one by one, you can draw them on a hidden canvas. And when they are all finished, you copy the whole hidden canvas to the actual canvas in one go. – Kokodoko Commented Feb 22, 2021 at 0:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Like Pointy mentioned in ment, javascript is mostly single threaded.

If you find lag because the canvas is large, you can promisify addToCanvas. what it will do is defer the invocation of these function in the future, permitting the page to be interacted between each invocation.

If you have to do something after all "addToCanvas" have been called, you can use Promise.all()

To do truly parallel work, you would need to work with WebWorker, but these have limitation. They don't have access to the DOM, and can only be interacted with a asynchronous message API. Depending of your need, it could be a solution. It is useful if you have long calculation you want to do in the background.

本文标签： typescriptforEach parallel in JavascriptStack Overflow