HTML5 Web Workers - 如何在线程之间共享工作

时间:2013-02-28 12:23:40

标签: javascript html5 web-worker

对于JS而言,我是一个新手,但在研究了Web Workers API之后,我已经尝试了一些基本的多线程。我下面的尝试是抽象确定下一个工作单元(即sendWorkUnit())的逻辑,然后在启动工作程序时使用它,并在它们的消息处理程序中使用它以确保它们在作业完成之前继续工作。

我认为这种方法很合理,但我很怀疑我的设计错了。为什么?因为我很快就意识到,一旦工作完成,我就不会关闭每个工人,因此,我尝试按如下方式修改sendWorkUni():

function sendWorkUnit(worker) {
  if (workCount < testData.length) {
    worker.postMessage(testData[workCount++]);
  } else {
    worker.terminate();
  }
}

但是,当我进行此更改时,整个事情就会爆炸,我只会回到数组的前4个元素。任何解释或指示都将非常感谢!

Manager.js

window.onload = function() {
  var numWorkers = 5,
      workers = [],
  testData = ['f', 'o', 'o', 'b', 'a', 'h'],
  workCount = 0,
  ol = document.querySelector('#output');

//Spawn some workers
for (var i = 0; i < numWorkers; i++) {
  var worker = new Worker('worker.js');
  worker.addEventListener('message', function(e) {
    displayWorkUnit(e);
    sendWorkUnit(worker);
  }, false);
  workers.push(worker);
}

//Start the workers
for (var i = 0, l = workers.length; i < l; i++) {
  sendWorkUnit(workers[i]);
}  

//Send next unit
function sendWorkUnit(worker) {
  if (workCount < testData.length) {
    worker.postMessage(testData[workCount++]);
  } 
}

//Display each worker's output
function displayWorkUnit(e) {
  var li = document.createElement('li');
  li.innerHTML = e.data;
  ol.appendChild(li);
}

}

Worker.js

self.addEventListener('message', function(e) {
  postMessage(e.data.toUpperCase());
}, false);

0 个答案:

没有答案