如何在 Web Worker 内部调用外部 function

Question

我正在了解 Web Worker，今天我需要让外部 function 在 Web Worker 中工作，如下所示：

主.js：

function doSomething(parameter){
   //Doing something
}
if (window.Worker) {
   const myWorker = new Worker("worker.js");
   myWorker.postMessage("Hello World");
} else {
   console.log('Your browser doesn\'t support web workers.');
}

工人.js：

onmessage = function(e) {
   doSomething(e.data)
}

有办法完成这项工作吗？

Answer 1

您发送给 web 工作人员的所有内容都必须是可序列化的。 由于 function 不是，您不能像您可能想要的那样使用回调模式。

唯一的解决方案是像使用postMessage一样将消息发送回主线程，并且主线程必须使用message事件侦听器确认该消息并自行执行doSomething function。

Answer 2

这有点 hacky，但根据您的用例，您可以执行以下操作：

// main.js

const doSomething = (param) => {
   return param + '!!!'
}

const worker = new Worker("worker.js")

worker.postMessage({
    fn: doSomething.toString(),
    param: "Hello World",
})

worker.onmessage = (e) => {
    console.log(e.data) // logs "Hello World!!!"
}

// worker.js:

self.onmessage = (e) => {
    const { fn, param } = e.data

    const result = eval(`(${fn})`)(param)

    self.postMessage(result)
}

请注意，通常最好避免使用eval ，但只要doSomething是可信代码，它在这里就是安全的。

另请注意，如果doSomething依赖于自身外部的依赖项，这将失败； 所有这些依赖项都需要是可序列化的，并通过相同的postMessage机制作为参数显式传递。