Question

我在我的应用程序中使用web worker来执行某些操作。仅使用function从我的js文件中调用Web worker parameter一次。但它执行两次，第一次没有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);
  };
}

web worker文件中的

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');

我强烈建议使用PHPStorm或WebStorm之类的复杂IDE来提供有关此类较小（和较大）错误的提示，因为它们引用整个应用程序，因此知道调用和定义某些内容的位置。

单个调用的Web worker函数返回响应两次

1 个答案: