HTML5 WebWorker逻辑流程

Question

所以我有这个js主文件：

var worker = new Worker("../Scripts/worker.js");
worker.onmessage = function (event) {
    alert("Worker said : " + event.data);
};
worker.postMessage("Naruto");
worker.postMessage("Sakura");

worker.js在这里：

self.onmessage = function (event) {
      self.postMessage("Hi " + event.data);
};

self.postMessage("WHERE'S SASUKE? [1]");
self.postMessage("WHERE'S SASUKE? [2]");

我仍然对它们的实际工作原理感到有点困惑。但结果是这样的(按照出现的顺序)：

Worker said: WHERE'S SASUKE? [1]
Worker said: WHERE'S SASUKE? [2]
Worker said: Hi Naruto
Worker said: Hi Sakura

他们说，要启动一个worker，请使用postMesage()。

第一个问题:如果我的主js文件postMessage(“火影忍者”)，为什么工人首先显示两个“佐助在哪里？”然后展示火影忍者和樱花？它不是应该首先触发它的onMessage事件，因为它从主线程接收了数据吗？

第二个问题:当我postMessage(“火影忍者”)时，它显示了两个“佐助在哪里？”但是为什么当我做postMessage(“樱花”)时，它没有显示两个“佐助在哪里？”？我的意思是，我在主线程中调用了postMessage()两次，为什么只显示了两个“佐助在哪里”？它不是应该“执行”worker.js两次，从而看到四个“佐助在哪里？”？(请开导我)

Answer 1

一些注释可以帮助您理解所发生的事情

main.js

var worker = new Worker("../Scripts/worker.js");

// register handler, 
// code is executed only when a message is received from worker
worker.onmessage = function (event) {
    alert("Worker said : " + event.data);
};

worker.js

// register onmessage handler , 
// code will not be executed at this point but only when you post a message
self.onmessage = function (event) {
      self.postMessage("Hi " + event.data);
};

// these are executed immediately
// they will be executed only once during the 'new Worker' part
self.postMessage("WHERE'S SASUKE? [1]");
self.postMessage("WHERE'S SASUKE? [2]");