Question

请考虑以下代码：

worker.js

onmessage = function(evt){
    postMessage({data:"foo",id:evt.data.id});
};

master.js（嵌入在某些HTML中）

function startWorker(count){
    var running = count;
    for(var i = 0; i < count; i++){
        console.log("Creating worker " + i);
        var worker = new Worker("worker.js");
        worker.onmessage = function(event){
        console.log("Worker #" + event.data.id + " finished");
        worker.terminate();
        running--;
        if(!running)
            console.log("All worker finished");
        }
        worker.postMessage({id:i});
    }
}
startWorker(3);

每当我在 Chrome 或 Firefox 中执行此操作时，大部分时间我只会获得以下输出：

创建工人0 创造工人1 创造工人2 工人＃0完成了工人＃1完成了

输出中缺少worker 2，它从不响应该消息。但是，如果我多次重试，那么所有工作人员都会回复我的信息。

你知道我的问题是什么吗？我创建了一个Fiddle来测试这种行为。

Answer 1

此处的问题是变量worker及其在onmessage函数中的使用方式。

onmessage函数是异步的，for循环中没有特殊范围，因此worker变量在每次迭代时都会被覆盖，并且不能在onmessage函数中使用，我们可以使用this，就像这样

for (var i = 0; i < count; i++) {
    log("Creating worker " + i);
    var worker = new Worker(url);
    worker.onmessage = function (event) {
        log("Worker #" + event.data.id + " finished");
        this.terminate(); // "this" will be the correct worker
        running--;
        if (!running) console.log("All worker finished");
    }
    worker.postMessage({
        id: i
    });
}

FIDDLE

HTML5 Web Worker不响应消息

1 个答案: