Stopping a for loop until worker is done

Question

I have made a for loop who call a web worker to highlight code inside code tag

I have made this loop, this call my worker and do the job.

highlightBase: ->
  codes = document.getElementsByClassName('hljs')

  if (codes)
    for code in codes
      HighlightWorker = new Worker('/js/highlight_worker.js')

      HighlightWorker.onmessage = (event) ->
        code.innerHTML = event.data

      HighlightWorker.postMessage(code.textContent)

This is working well but I need to stop this loop until the worker is done.

Is this possible to stop this loop and continue it after or I need to add some timeOut ?

Is this an exact duplicate of [How to wait for WebWorkers in a loop](http://stackoverflow.com/q/39281491/1048572)? — Bergi, Sep 05 '16 at 15:08
@Jérôme Guessed so :-) It's just weird they were posted less then 24h apart. I hope the link helps — Bergi, Sep 05 '16 at 15:14

Redu · Answer 1 · 2016-09-05T14:59:19.183

I am not very familiar very coffeeScript but this might give you an idea.

Stoping a for loop is not possible. There are generator functions for that lazy evaluation purposes. However although you could use, i don't think you need generators here. Instead i guess promises could be very handy. You might use Promise.all(). But first you have to create a utility function to return a promise when you instantiate a worker.

function postMessageToWorker(worker,message){
  var p = new Promise((resolve,reject) => worker.onmessage = resolve);
  worker.postMessage(message);
  return p;
}

var proms = [];

if (codes)
  for (var code of codes)
    proms.push(postMessageToWorker(new Worker('/js/highlight_worker.js'), code.textContent));
Promise.all(proms).then(a => a.forEach((e,i) => codes[i].innerHTML = e.data));

Here is a plunker code for you to play.

score 0 · Accepted Answer · answered Sep 02 '16 at 15:21

Why do you need to stop the loop? It looks like you are trying to do synchronous tasks, meaning the workers do their job one after the other. But the whole thing about workers is that they are asynchronous...

I guess if you want your code to work synchronously, you need to do something like that:

    highlightBase: ->
  codes = document.getElementsByClassName('hljs')

  if (codes)
    for code in codes

        code.innerHTML = function_that_was_before_made_by_worker()

And that it is...

Stopping a for loop until worker is done

2 Answers2