当web worker返回结果时异步将数据推送到数组中

时间:2017-10-22 08:36:50

标签: javascript arrays web-worker

我已经开发了代码来创建5个Web工作者来执行操作。我只是将整数发送给Web worker以生成一个sum并返回一个json对象。我将结果推送到数组中。所有Web工作人员完成任务后,此阵列将存储在本地存储中。问题是存储在本地存储中的数组不会按每个Web工作者返回的顺序存储值。如果Web worker首先返回该值,则该数组必须包含零索引值,这意味着不满足异步操作。我该怎么做呢?

这是我的.js文件代码:

      window.onload = init;
   var running = 0;
    var arr=[1,1001,2001,3001,4001];
   var sec=[1000,2000,3000,4000,5000]
   var results=[];
    function init() {

      sendworker();
    }


   function sendworker()
    {

     var n, worker;
     display("Starting workers...");

     for (n = 0; n <5; ++n) {
    workers = new Worker("jsonWorker.js");
    workers.onmessage = workerDone;
    workers.postMessage({id: n, start: arr[n],end:sec[n]});
    ++running;

     }

}

  function workerDone(e) {
    --running;
    display("Worker  " + e.data.id + " is done, sum of integers between: "+e.data.start+ "&"+e.data.end+"=" + e.data.sum);
    results.push(e.data.sum);

    if (running === 0) { // <== There is no race condition here, see below
        display("All workers complete");
        window.localStorage.setItem("Results", JSON.stringify(results));

    }
}

function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
}

//我的web worker.js代码

 this.onmessage = function(e) {
  var data = e.data;
  var a=data.start;
  var b=data.end;
  var c=0;
  for (var i=a; i<= b; i++) {

     c=c+i;

  }
  this.postMessage({id: e.data.id,start:a,end:b,sum: c});

};

enter image description here

enter image description here

在图片中,worker 0首先返回结果,因此它的数据应该存储在本地存储器中的第二个数组索引上,但不是。

2 个答案:

答案 0 :(得分:0)

将他们的id用作偏移量(以便在启动后将结果排序):

results[e.data.id] = e.data.sum;

答案 1 :(得分:0)

您可以使用await Promise.all([someCall(), anotherCall()])。 您将以正确的顺序获得结果。 (如果您正在编写代码)