具有多个数组参数的 Javascript Web Worker

Question

我希望将两个数组传递给 JS Worker，在 worker 中处理它们，并在处理完成后重新加载页面。但是我坚持使用 Argument 语法。我收到错误消息：“找不到与提供的签名匹配的函数”

var issueKeyArr = [1,2,3,3], executionIdArray = [4,5,5,6]
var myWorker = new Worker('zephyr-worker.js');

myWorker.onmessage = function(e) {
    console.log('Message received from worker ========== reload the page here');
}

myWorker.postMessage(JSON.stringify(issueKeyArr), JSON.stringify(executionIdArray));
console.log('Message posted to worker');

我的“zephyr-worker.js”文件：

onmessage = function(issueKeyArr, executionIdArray) {   
    console.log("worker called ========================");
    for (var i=0; i < issueKeyArr.length; i++)
    {
        var issueKey = issueKeyArr[i];
        var executionId = executionIdArray[i];
        // more processing here...
    }
     postMessage("done");
}

Answer 1

syntax of postMessage是

worker.postMessage(yourMessageData, [transfer]);

由于您不需要真正转移任何对象所有权，因此您不需要关心上面 postMessage 签名的可选 [transfer] 部分。

而onmessage对应的语法是

myWorker.onmessage = function(messageEvent) { ... }

与 messageEvent 对应的对象看起来像 {..., data: yourMessageData, ...}

从这个documentation and the example there可以看出的另一件事是你不需要使用JSON.stringify。简单对象的序列化已经自动完成。

所以你的代码应该变成：

var issueKeyArr = [1,2,3,3], executionIdArray = [4,5,5,6]
var myWorker = new Worker('zephyr-worker.js');

myWorker.onmessage = function(e) {
    console.log('Message received from worker ========== reload the page here');
}

myWorker.postMessage({issueKeyArr: issueKeyArr, executionIdArray: executionIdArray});
console.log('Message posted to worker');

用你的“zephyr-worker.js”文件：

onmessage = function(messageEvent) {   
    console.log("worker called ========================");

    var issueKeyArr = message.data.issueKeyArr;
    var executionIdArray = message.data.executionIdArray;

    for (var i=0; i < issueKeyArr.length; i++)
    {
        var issueKey = issueKeyArr[i];
        var executionId = executionIdArray[i];
        // more processing here...
    }
     postMessage("done");
}

Answer 2

只需传递一个包装器对象，也不需要 JSON.stringify，结构化序列化现在足够快，可以完成所有工作。

所以这会给

var issueKeyArr = [1,2,3,3], executionIdArray = [4,5,5,6]
var myWorker = new Worker('zephyr-worker.js');

myWorker.onmessage = function(e) {
    console.log('Message received from worker ========== reload the page here');
}

myWorker.postMessage( { issueKeyArr, executionIdArray } );
console.log('Message posted to worker');

而在工人中

onmessage = function( { data: { issueKeyArr, executionIdArray } } ) {   
    console.log("worker called ========================");
    for (var i=0; i < issueKeyArr.length; i++)
    {
        var issueKey = issueKeyArr[i];
        var executionId = executionIdArray[i];
        // more processing here...
    }
     postMessage("done");
}

const worker_script = `
onmessage = function( { data: { issueKeyArr, executionIdArray } } ) {   
    console.log("worker called ========================");
    for (var i=0; i < issueKeyArr.length; i++)
    {
        var issueKey = issueKeyArr[i];
        var executionId = executionIdArray[i];
        // more processing here...
    }
     postMessage("done");
}`;
const worker_blob = new Blob([worker_script], { type: "text/javascript" });
const worker_url = URL.createObjectURL(worker_blob);


var issueKeyArr = [1,2,3,3], executionIdArray = [4,5,5,6]
var myWorker = new Worker(worker_url);

myWorker.onmessage = function(e) {
    console.log('Message received from worker ========== reload the page here');
}

myWorker.postMessage( { issueKeyArr, executionIdArray } );
console.log('Message posted to worker');

具有多个数组参数的 Javascript Web Worker

Javascipt Web Worker with Multiple Array Arguments

javascript

html

web-worker