多个 JavaScript 工作者

Question

好吧，所以我正在编写一个代码，我启动了 5 个工作人员，他们都睡眠了 0-10 秒的随机时间，然后返回他们睡眠的时间。当所有工人都睡完后，经理将其输出到 html

到目前为止，我已经让我的 5 名工人随机睡觉，但不知道如何处理对经理的多次回复。 获取随机数的worker.js方法，休眠该随机数然后发送它休眠的时间 manager.js（下）

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;
         }
}


}

此代码有 5 个正在工作的工作人员，但消息是来自最后一个工作人员的消息。所以我的问题是如何在管理器中收集这 5 条消息，等待所有 5 条消息然后发送到 html？

Answer 1

考虑到您对其他答案的回应，这应该可行。

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

也许工作人员正在覆盖文本。 尝试附加文本：

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

Answer 3

我会将每个工作人员包装到一个 Promise 中，然后你可以执行 Promise.all() 来等待所有工作人员完成。

function promiseFromWorker(worker) {
  return new Promise(function(resolve) {
    worker.onmessage = function(event) {
      resolve(event);
    }
  }
}

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 promises = worker.map(promiseFromWorker);

Promise.all(promises).then(function(events){
    events.map(function(event) {
         ndate = new Date();
         message = ndate + " Worker says " + event.data;
         document.getElementById("output").innerHTML = message;
    });
});