CODEWITHSUNDEEP
javascripthtmlweb-worker
Tech Solvr
Tech Solvr

Reputation: 505

Use of setTimeout() in creating web worker in html5

I am following a tutorial on web worker at - http://www.w3schools.com/html/html5_webworkers.asp

Most of the things are clear to me but I don't know what is the purpose of using setTimeout function and how postMessage(i) is returning the value of i to w.onmessage.

Code - 

var i = 0;

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

timedCount();

Can anyone please explain me the flow how this example is working ?

Upvotes: 0

Views: 2509

Answers (3)

John Randall Cablao
John Randall Cablao

Reputation: 11

By definition, the setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. http://www.w3schools.com/jsref/met_win_settimeout.asp

var i = 0;

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

timedCount();

The script above loads the function timedCount. The initial value for the variable i is 0. Following the equation, i is equated to 1 ( 0 + 1). The postMessage then show the value of i which is 1. Next is where setTimeout comes in.

setTimeout, based on the definition, will run the script after a 500-millisecond interval. Since the function timeCount is called in a loop, it will run the function in a continuous loop with the interval of 0.5 seconds in each run. It will count and show the value of i in an increment of 1 every 500 milliseconds.

Upvotes: 1

Shekhar Pankaj
Shekhar Pankaj

Reputation: 9145

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.";
    }
}

Notice the Call back registered on 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.

and the Magic is Played by SetTimeout Function which recursively post timer value at the interval of 500ms using the Global Method of Webworker ie. PostMessage

Full Details of PostMessage function can be found here

PostMessage Syntax

myWorker.postMessage(aMessage, transferList);

Parameters

aMessage

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 Optional

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.

Only MessagePort and ArrayBuffer objects can be transferred.

Upvotes: 2

zvone
zvone

Reputation: 19352

The purpose of setTimeout is to call timedCount after 500 ms. Since it is called recursively, the effect is that timedCount is called twice in each second.

Note also, that this would do the same:

var i = 0;

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

setInterval(timedCount, 500);

Upvotes: 4

Related Questions