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

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”。这是它应该做什么，或者我错过了什么？

非常感谢！

来源

2010-05-24 Misha Moroshko

如果你还没有，给规范（http://www.w3.org/TR/workers/）通读。它*应该*覆盖大部分或全部。 – 2010-05-24 11:12:57

我不得不说，一个斐波那契计算器在我选择的事物清单中并不高，以此来构建一个周围的网络工作者的例子！ :-)不是，如果我想做一些简单明了的例子。这可能是有用的：http://ejohn.org/blog/web-workers/顺便说一句，当我在Firefox中运行该示例时，我也会得到'5';我怀疑它可能已经写入了Web工作者和/或postMessage的早期版本，并且Firefox 3.6（现在）支持稍后的迭代。（这是非常尖端的东西。） – 2010-05-24 11:22:40

我想从示例中学习这些东西，并且在写这个之前看到了一些示例。我对这种工作方式仍存在基本的误解。如果有人能回答我的问题，我会很高兴。现在阅读Spec对我来说太痛苦了。 – 2010-05-24 11:39:31

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

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

来源

2011-04-18 17:34:44 syockit

我也想添加你可以调试网络工作者只有在基于铬的浏览器。您必须选择来源在开发人员面板和右列扩展底线工人然后选择复选框暂停开始。

来源

2013-08-10 16:51:52 r90t

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

回答

相关问题