Java Reference
In-Depth Information
<body>
<h1>Web Worker</h1><div id="antwort1"></div><div id="antwort2"></div>
<button id="a">Eins</button><button id="b">Zwei</button>
</body>
</html>
Sie sehen hier zwei Buttons und zwei Ausgabebereiche. In den einen Ausgabebereich wollen
wir rekursiv, aber mit
setTimeout()
verzögert, aus dem Hauptskript schreiben. Das hat noch
nichts mit dem Worker zu tun, sondern soll die Aktionen in dem Hauptstrang simulieren.
Bild 14.2■
Der Worker ist zwar gestartet, aber nur die rekursive Funktion des Hauptprozesses liefert
eine Ausgabe.
Mit den Klicks auf die beiden Schaltlächen soll jeweils ein Web Worker gesteuert werden,
der in den anderen Ausgabebereich schreibt. Dem Web Worker wollen wir dabei gezielt
einen Wert übergeben. Das ist erst einmal das Skript
kap14_2.js:
var th1 = new Worker("lib/js/worker/hintergrundarbeit2.js");
var i = 0;
function rek() {
document.getElementById("antwort2").innerHTML = Math.random();
if (i++ > 1000) return;
setTimeout(rek, 30);
}
window.onload = function() {
th1.onmessage = function(ev) {
document.getElementById("antwort1").innerHTML = ev.data;
};
document.getElementById("a").onclick = function() {
th1.postMessage(0)
;
};
document.getElementById("b").onclick = function() {
th1.postMessage(1)
;
};
rek();
};
Beim Laden des Skripts wird automatisch bereits ein Web Worker gestartet. Wenn auf den
ersten Button geklickt wird, bekommt der Worker mit
postMessage()
den Wert 0 überge-
ben und beim zweiten Button den Wert 1. Parallel zu dem Web Worker läut die rekursive
Funktion
rek()
, die mit
setTimeout()
eingebremst wird. Schauen wir uns die Worker-
Syntax an
(hintergrundarbeit2.js):
Listing 14.8■
Ein Worker, der Daten entgegennimmt
var abbruchwert = 1000000000;
var nachrichtwert = 100000000;
self.onmessage = function(ev)
{
Search WWH ::
Custom Search