Web worker 函数 return 单次调用响应两次

Question

我在我的应用程序中使用网络工作者来执行一些操作。使用 parameter 从我的 js 文件调用网络工作者 function 一次。但它执行了两次，第一次没有 parameter（参数 'undefined'）。第二次 parameter。我做错了什么？

js文件

function f1(data) {
  console.log('function called');
  ww.postMessage({ action: 'name', data: { params: data } });
  ww.onmessage = function(event) {
    res = event.data;
    console.log(event.data);
  };
}

在网络工作者文件中

self.addEventListener('message', function(e) {
  functionName = e.data.action;
  data = e.data.data;
  switch (functionName) {
    case 'name':
      var res = processData(data);
      self.postMessage(res);
      break;
  }
});

function processData(data) {
  if (data.params != undefined) {
    console.log('parameter', data);
    //some code to run
    //finally
    return res;
  }
}

我在控制台中得到的输出

function called 
undefined // from event.data
parameter data //actual data I passed
{} //event.data  result of the action

为什么parameter data第一次没有得到安慰

Answer 1

您的代码中有一些小错误阻碍了顺利执行

1.您忘记将 functionName 和 data 声明为变量

self.addEventListener('message', function(e) {
  var functionName = e.data.action;
  var data = e.data.data;
  switch (functionName) {
    case 'name':
      var res = processData(data);
      self.postMessage(res);
      break;
  }
});

2。您的 return 值也从未声明为变量

function processData(data) {
  if (data.params !== undefined) {
    console.log('parameter', data);
    //some code to run
    //finally
    return data;
  }
}

3。在您的 callback 函数中，您也没有将 res 声明为变量

var ww = new Worker('worker.js');

function f1(data) {
  console.log('function called');
  ww.postMessage({ action: 'name', data: { params: data } });
  ww.onmessage = function(event) {
    var res = event.data;
    console.log(res);
  };
}

f1('test');

我强烈建议使用复杂的 IDE，例如 PHPStorm 或 WebStorm，它们会提示此类更小（和更大）的错误，因为它们引用整个应用程序，因此知道在何处调用和定义某些内容。

Web worker 函数 return 单次调用响应两次

Web worker function return response two times for a single call

javascript

web-worker