HTML5 Web Worker不响应消息

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已完成

输出中缺少工作程序2，它从不响应该消息。 但是，如果我重试几次，则所有工作人员都会几次响应我的消息。

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

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

小提琴