JavaScript在一个函数中包含多个子进程

Question

我很好奇是否可以在一个函数中运行多个web工作程序/子进程。

所以我有一个函数，它调用多个(主线程阻塞，重载(算法。这需要相当长的时间，所以我希望他们并行/多个剧院运行以节省时间。

function calculateThings(division, colorVal) {
const resultArray = imageToArray(img, division);
/* Worker 1 / Child-Process 1 */
const resultDefaultAlgorithm = algorithmDefault(resultArray, colorVal);
const resultDefaultImage = arrayToImage(resultDefaultAlgorithm, colorVal);
/* Worker 2 / Child-Process 2 */
const resultFAlgorithm = algorithmF(resultArray, colorVal);
const resultFImage = arrayToImage(resultFAlgorithm, colorVal);
/* Worker 3 / Child-Process 3 */
const resultFSAlgorithm = algorithmFS(resultArray, colorVal);
const resultFSImage = arrayToImage(resultFSAlgorithm, colorVal);
return [resultDefaultImage, resultFImage, resultFSImage];
}

正如您所看到的，我想要为每个web工作者/子进程调用两个函数。这可能吗？

看看Web Workers，只有当每个工作人员都有自己的文件时，这才是可能的，而我不想/也不知道该怎么做

Answer 1

当然。您可以创建同一工作文件的多个实例。这将为每个工作线程创建一个与主线程并行运行的新线程。在那个工人身上，你应该定义完成繁重工作的功能。

您可以将函数映射到对象上，以便在将数据发送给工作者时选择要执行的函数(如下面的示例所示(，也可以创建各自具有唯一函数的工作者文件。

下面我选择了前者。创建工作者的多个实例，并侦听message事件以接收数据。

向您的员工发送一些指示。你可以在一个数组中这样做，以发送一个工作人员应该做和响应的事情的列表，比如调用什么函数和传递参数

// app.js
const workerOne = new Worker('worker.js');
const workerTwo = new Worker('worker.js');
workerOne.addEventListener('message', ({ data }) => {
console.log(data); // Received a result!
});
workerTwo.addEventListener('message', ({ data }) => {
console.log(data); // Received a result!
});
workerOne.postMessage([
{
action: 'algorithmDefault', // Function to call.
args: [5, 10] // Arguments to pass to function.
},
{
action: 'arrayToImage',
args: [['something', 10], 13]
},
]);
workerTwo.postMessage([
{
action: 'algorithmDefault',
args: [2, 20]
},
{
action: 'arrayToImage',
args: [[2, 90, 'whatever'], 9]
},
]);

在worker中还监听message事件以接收来自主线程的指令。循环执行这些指令，并使用提供的参数调用相应的操作。您可以立即发回所有结果，或者将它们收集在一个数组中，并在循环完成后将其发回。

// worker.js
const actions = {
algorithmDefault: (division, colorVal) => {
// ... return something.
},
arrayToImage: (increment, colorVal) => {
// ... return something.
}
};
self.addEventListener('message', ({ data }) => {
const results = [];
for (const { action, args } of data) {
const actionToCall = actions[action]; // Get the function to call.
const resultOfAction = actionToCall(...args); // Calculating...
results.push(resultOfAction); // Collect the result.
}
postMessage(resultOfAction); // Send back the results.
});