HTML5 WebWorker Logic flow

HTML5 WebWorker Logic flow

本文关键字：flow Logic WebWorker HTML5      更新时间：2023-09-26

所以我有这个主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，使用postmessage()。

第一个问题:那么，如果我的主js文件postMessage("Naruto")，为什么worker首先显示两个"WHERE'S SASUKE?"，然后显示Naruto和Sakura?它不应该首先触发它的onMessage事件，因为它从主线程接收到一个数据?

第二个问题:当我postMessage("火影忍者")时，它显示了两个"佐助在哪里?"但是为什么当我执行postMessage("Sakura")时，它没有显示两个"SASUKE在哪里?"?我的意思是，我调用postMessage()在主线程两次，为什么只有两个"哪里的SASUKE"显示?它不应该"执行"worker.js两次，从而看到四个"哪里是SASUKE?"吗?

一些注释可以帮助你理解发生了什么

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]");
相关文章：