在 html5 中使用 setTimeout() 创建 Web Worker

Question

我正在学习有关 Web Worker 的教程，网址为 - http://www.w3schools.com/html/html5_webworkers.asp

大部分事情我都很清楚，但我不知道使用 setTimeout 函数的目的是什么以及 postMessage(i) 如何将 i 的值返回给 w.onmessage.

代码 -

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

任何人都可以向我解释这个示例的工作流程吗？

Answer 1

setTimeout的目的是在500毫秒后调用timedCount。由于是递归调用，效果是timedCount每秒调用两次

另请注意，这会做同样的事情：

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
}

setInterval(timedCount, 500);

Answer 2

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

注意在 w.onmessage

上注册的回调

When the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.

魔术由 SetTimeout 函数播放，该函数使用 Webworker 的全局方法以 500 毫秒的间隔递归 post 计时器值，即。 PostMessage

可在此处找到 PostMessage 函数的完整详细信息

PostMessage Syntax

myWorker.postMessage(aMessage, transferList);

参数

一条消息

The object to deliver to the worker; this will be in the data field in the event delivered to the DedicatedWorkerGlobalScope.onmessage handler. This may be any value or JavaScript object handled by the structured clone algorithm, which includes cyclical references.

transferList 可选

An optional array of Transferable objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable (neutered) in the context it was sent from and it becomes available only to the worker it was sent to.

只能传输MessagePort和ArrayBuffer对象。

Answer 3

根据定义，setTimeout() 方法在指定的毫秒数后调用函数或计算表达式。 http://www.w3schools.com/jsref/met_win_settimeout.asp

var i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

上面的脚本加载函数timedCount。变量 i 的初始值为 0。根据等式，i 等于 1 ( 0 + 1)。然后 postMessage 显示 i 的值为 1。接下来是 setTimeout 进来的地方。

setTimeout，根据定义，将在 500 毫秒间隔后运行脚本。由于timeCount函数是在循环中调用的，所以会运行这个函数一直循环，每次运行间隔0.5秒。每 500 毫秒，它会以 1 的增量计数并显示 i 的值。

在 html5 中使用 setTimeout() 创建 Web Worker

Use of setTimeout() in creating web worker in html5

html

javascript

web-worker