Web工作者 - 他们是如何工作的？

更新时间：2023-11-22 23:10:52

工作人员会在您拨打 postMessage 方法。
函数绑定到worker的 onmessage 当工作者调用 postMessage 时，主代码将工作。

全局变量不在主线程和辅助线程之间共享。通过 postMessage 。

来传递数据的唯一方法就是您怀疑的 onmessage

addEventListener

消息

主要代码：

  function showResult（event）{
 document.getElementById （结果）。textContent = event.data; 
 dump（Got：+ event.data +\\\
）; 
} 
 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）+斐波纳契（n-2）; 
} 

 var result = fibonacci（5）; 
 dump（Got：+ result +\\\
）;

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

I'm trying to understand this example:

HTML (main code):

   <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 (worker code):

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

I have the following questions:

When exactly the worker code starts to run ? Immediately after the execution of var worker = new Worker("fibonacci.js"); ?
Is that true that onmessage = function(event) { ... } assignment in the worker code will be executed before worker.postMessage("5"); in the main code ?
Can worker code access global variables that are defined in the main code (like worker)?
Can main code access global variables that are defined in the worker code (like results)?
It seems to me that worker.onmessage = function(event) {...} in the main code has the same meaning like onmessage = function(event) {...} in the worker code (which is onmessage event handler of the worker). Where am I wrong ? What is the difference between them ?
What this code should actually do ? When I run it here it just prints "5". Is that what it is supposed to do, or I'm missing something ?

Thanks a lot !

Check out HTML5 Rocks: The Basics of Web Workers for general tutorial.

Workers will start as soon as you call the postMessage method of the worker.
the function bound to worker's onmessage in the main code will work when the worker calls postMessage.
global variables are not shared between main and worker threads. The only way to pass data is through messaging via postMessage.
as you suspected, the onmessage on both worker and main code has the same meaning. It is an event handler for when the thread receives a message event. You can even use addEventListener instead, catching message event:

Main Code:

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

Worker code:

addEventListener('message', resultReceiver, false);

The fibonacci example you took is a recursive worker example. If not using workers, it would be something like this:

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

(oh no, I'm not going to do a stackless for you. You write it yourself!)

上一篇 : ：如何在Maria DB中重命名列名称下一篇 : TinyMCE没有工作 - 即使他们的例子？

Web工作者 - 他们是如何工作的？

相关阅读

推荐文章