Multiple JavaScript workers

Question

Ok, so I'm working on a code where I start 5 workers, they all sleep for a random time from 0-10 seconds, they then return how long they slept for. the manager then outputs this to the html when all workers are done sleeping

So far I have made my 5 workers, that sleep for random times but don't know how to handle the multiple responses to the manager. worker.js method that gets a random numbers, sleeps for that randomnumber then sends how long it slept manager.js (under)

window.onload = function(){
var w1= new Worker("worker.js");
var w2= new Worker("worker.js");
var w3= new Worker("worker.js");
var w4= new Worker("worker.js");
var w5= new Worker("worker.js");

var worker = [w1,w2, w3, w4, w5]

for (i =0; i < worker.length; i++){

worker[i].postMessage("sleep");

    worker[i].onmessage = function(event) {
         ndate = new Date();
         message = ndate + " Worker says " + event.data;
         document.getElementById("output").innerHTML = message;
         }
}


}

this code has 5 working workers but the message is the message from the last worker. So my question is how do I collect these 5 messages in the manager, wait for all 5 then send to html?

Answer 1

Considering your response to the other answer, this should work.

window.onload = function(){

    var w1= new Worker("worker.js");
    var w2= new Worker("worker.js");
    var w3= new Worker("worker.js");
    var w4= new Worker("worker.js");
    var w5= new Worker("worker.js");

    var worker = [w1,w2, w3, w4, w5];

    var wokenUp = 0;
    var allMessages = "";

    for (i =0; i < worker.length; i++){

        worker[i].onmessage = function(event) {
            ndate = new Date();
            message = ndate + " Worker says " + event.data;

            allMessages += message;
            wokenUp++;

            if (wokenUp == worker.length){
                document.getElementById("output").innerHTML = allMessages;
            }
         }

        worker[i].postMessage("sleep");
    }
}

Answer 2

Maybe the workers are overwriting the text. Try appending the text:

document.getElementById("output").innerHTML += message;