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

Question

我很好奇是否有可能在一个函数中运行多个web worker/子进程。

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

  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 worker，这似乎只有当每个worker都有自己的文件时才有可能，而我并不想/真的不知道该怎么做。

Answer 1

一定。您可以创建同一工作文件的多个实例。这将为每个工作线程创建一个与主线程并行运行的新线程。在该worker中，您应该定义执行繁重任务的函数。

您可以将函数映射到对象上，以便在向worker发送数据时选择要执行的函数(如下例所示)，也可以创建各个worker文件，每个worker文件都有自己独特的函数。

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

向您的员工发送一些说明。您可以在数组中执行此操作，以发送worker应该执行的操作和响应的列表，例如要调用的函数和要传递的参数。

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