Question

我正在尝试理解this example：

HTML（主要代码）：

   <html>  
     <title>Test threads fibonacci</title>  
     <body>  

     <div id="result"></div>  

     <script language="javascript">  

       var worker = new Worker("fibonacci.js");  

       worker.onmessage = function(event) {  
         document.getElementById("result").textContent = event.data;  
         dump("Got: " + event.data + "\n");  
       };  

       worker.onerror = function(error) {  
         dump("Worker error: " + error.message + "\n");  
         throw error;  
       };  

       worker.postMessage("5");  

     </script>  
     </body>  
   </html>

Javascript（工作人员代码）：

   var results = [];  

   function resultReceiver(event) {  
     results.push(parseInt(event.data));  
     if (results.length == 2) {  
       postMessage(results[0] + results[1]);  
     }  
   }  

   function errorReceiver(event) {  
     throw event.data;  
   }  

   onmessage = function(event) {  
     var n = parseInt(event.data);  

     if (n == 0 || n == 1) {  
       postMessage(n);  
       return;  
     }  

     for (var i = 1; i <= 2; i++) {  
       var worker = new Worker("fibonacci.js");  
       worker.onmessage = resultReceiver;  
       worker.onerror = errorReceiver;  
       worker.postMessage(n - i);  
     }  
  };

我有以下问题：

何时工作人员代码开始运行？执行var worker = new Worker("fibonacci.js");？
工作人员代码中的onmessage = function(event) { ... }分配是否会在主代码worker.postMessage("5");之前执行？
工作者代码可以访问主代码中定义的全局变量（如worker）吗？
主代码可以访问工作代码中定义的全局变量（如results）吗？
在我看来，主代码中的worker.onmessage = function(event) {...}与工作代码中的onmessage = function(event) {...}具有相同的含义（工作者的onmessage事件处理程序）。我哪里错了？他们之间有什么区别？
这段代码究竟应该做什么？当我运行here时，它只打印“5”。这是应该做的，还是我错过了什么？

非常感谢！

Answer 1

查看HTML5 Rocks: The Basics of Web Workers了解一般教程。

一旦调用了工作人员的postMessage方法，工作人员就会启动。
当工作人员调用onmessage时，主代码中绑定到工作人员postMessage的函数将起作用。
主线程和工作线程之间不共享全局变量。传递数据的唯一方法是通过postMessage发送消息。
如您所料，工作密码和主代码上的onmessage具有相同的含义。它是线程接收消息事件时的事件处理程序。您甚至可以使用addEventListener代替message事件：

主要代码：

function showResult(event) {  
   document.getElementById("result").textContent = event.data;  
   dump("Got: " + event.data + "\n");  
}
var worker = new Worker("fibonacci.js");
worker.addEventListener('message', showResult, false);

工人代码：

addEventListener('message', resultReceiver, false);

您采用的斐波纳契示例是一个递归工作者示例。如果不使用工人，那就是这样的：

function fibonacci(n) {
    if (n == 0 || n == 1) return n;
    return fibonacci(n-1) + fibonacci(n-2);
}

var result = fibonacci(5);
dump("Got: " + result + "\n");

（哦不，我不打算为你做一个无堆叠。你自己写吧！）

Answer 2

我还想补充一点，您可以在 Chromium 的浏览器中调试网络工作者。您必须在开发人员面板中选择 Sources ，然后在右栏展开底线 Workers ，然后选中在开始时暂停复选框。

网络工作者 - 他们如何工作？

2 个答案: