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

小提琴