8

我试图理解这个例子：

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事件处理程序）中的含义相同。我哪里错了？它们之间有什么区别？

  • 这段代码实际上应该做什么？当我在这里运行它时，它只打印“5”。这是它应该做的，还是我错过了什么？

非常感谢 ！

4

2 回答 2

8

查看HTML5 Rocks: The Basics of Web Workers以获得一般教程。

  • 一旦你调用postMessage了worker的方法，workers就会启动。
  • 主代码中绑定到worker的函数onmessage将在worker调用时起作用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");

（哦不，我不会为你做一个无堆栈的。你自己写！）

于 2011-04-18T17:34:44.477 回答
1

我还想补充一点，您只能在基于Chromium的浏览器中调试网络工作者。您必须在开发人员面板中选择Sources并在右栏中展开底线Workers然后选择复选框pause on start。

于 2013-08-10T16:51:52.583 回答