Web工作者 - 他们是如何工作的？ [英] Web workers - How do they work?
问题描述
我试图了解这个例子：
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 +\\\
）;
};
worker.onerror = function（error）{
dump（Worker error：+ error.message +\\\
）;
抛出错误;
};
worker.postMessage（5）;
< / script>
< / body>
< / html>
Javascript（worker code）：
var results = [];
函数resultReceiver（event）{
results.push（parseInt（event.data））;
if（results.length == 2）{
postMessage（results [0] + results [1]）;
}
}
函数errorReceiver（event）{
throw event.data;
}
onmessage = function（event）{
var n = parseInt（event.data）;
if（n == 0 || n == 1）{
postMessage（n）;
return;
（var i = 1; i <= 2; i ++）{
var worker = new Worker（fibonacci.js）;
worker.onmessage = resultReceiver;
worker.onerror = errorReceiver;
worker.postMessage（n - i）;
}
};
我有以下问题： 当工人代码开始运行时？立即执行 这是真的，工人代码中的 主要代码可以访问工人代码中定义的全局变量（如 在我看来， 这段代码实际上应该做什么？当我运行这里时，它只打印5。这是它应该做什么，或者我失去了一些东西？
var worker = new Worker（fibonacci.js）; ？
onmessage = function（event）{...} 赋值将在 worker.postMessage（5 ）;主代码中的？
results ）？
worker.onmessage = function（event）{ ...}主代码中的<... code>具有与工作代码中的 onmessage = function（event）{...} 相同的含义是 onmessage 工作者的事件处理程序）。我错在哪里？它们之间有什么区别？
查看 HTML5 Rocks：Web Workers的基础知识作为一般教程。
- 工作人员会在您拨打
postMessage方法。
- 函数绑定到worker的
onmessage当工作者调用postMessage时，主代码将工作。 - 全局变量不在主线程和辅助线程之间共享。通过
postMessage。 - 来传递数据的唯一方法就是您怀疑的
onmessage code>在工作者和主代码上具有相同的含义。它是线程收到消息事件时的事件处理程序。您甚至可以使用
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 beforeworker.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 likeonmessage = function(event) {...}in the worker code (which isonmessageevent 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
postMessagemethod of the worker. - the function bound to worker's
onmessagein the main code will work when the worker callspostMessage. - 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
onmessageon 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 useaddEventListenerinstead, catchingmessageevent:
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!)
这篇关于Web工作者 - 他们是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
