Web工作者 - 他们是如何工作的?
问题描述:
我想了解this example: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”。这是它应该做什么,或者我错过了什么?
非常感谢!
答
退房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");
(哦,不,我不会为你做一个无堆栈你自己写吧!)
答
我也想添加你可以调试网络工作者只有在基于铬的浏览器。您必须选择来源在开发人员面板和右列扩展底线工人然后选择复选框暂停开始。
如果你还没有,给规范(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