Webwerkers API
'n Webwerker is 'n JavaScript wat in die agtergrond loop, sonder om die werkverrigting van die bladsy te beïnvloed.
Wat is 'n webwerker?
Wanneer skrifte in 'n HTML-bladsy uitgevoer word, reageer die bladsy nie totdat die script klaar is nie.
'n Webwerker is 'n JavaScript wat op die agtergrond loop, onafhanklik van ander skrifte, sonder om die werkverrigting van die bladsy te beïnvloed. Jy kan voortgaan om te doen wat jy wil: kliek, dinge kies, ens., terwyl die webwerker in die agtergrond loop.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawes wat Webwerkers ten volle ondersteun:
| Chrome 4 | IE 10 | Firefox 3.5 | Safari 4 | Opera 11.5 |
| Jan 2010 | Sep 2012 | Jun 2009 | Jun 2009 | Jun 2011 |
Webwerkers voorbeeld
Die voorbeeld hieronder skep 'n eenvoudige webwerker wat getalle in die agtergrond tel:
Voorbeeld
Gaan Webwerkerondersteuning na
Voordat u 'n webwerker skep, kyk of die gebruiker se blaaier dit ondersteun:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Skep 'n Webwerker-lêer
Kom ons skep nou ons webwerker in 'n eksterne JavaScript.
Hier skep ons 'n skrif wat tel. Die skrip word in die "demo_workers.js" lêer gestoor:
let i = 0;
function timedCount()
{
i ++;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Die belangrike deel van die kode hierbo is die postMessage()metode - wat gebruik word om 'n boodskap terug na die HTML-bladsy te plaas.
Let wel: Normaalweg word webwerkers nie vir sulke eenvoudige skrifte gebruik nie, maar vir meer SVE-intensiewe take.
Skep 'n Webwerker-objek
Noudat ons die webwerkerlêer het, moet ons dit vanaf 'n HTML-bladsy oproep.
Die volgende reëls kyk of die werker reeds bestaan, indien nie - dit skep 'n nuwe webwerker-objek en loop die kode in "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Dan kan ons boodskappe van die webwerker stuur en ontvang.
Voeg 'n "onmessage"-gebeurtenisluisteraar by die webwerker.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Wanneer die webwerker 'n boodskap plaas, word die kode binne die gebeurtenisluisteraar uitgevoer. Die data van die webwerker word in event.data gestoor.
Beëindig 'n Webwerker
Wanneer 'n webwerker-objek geskep word, sal dit voortgaan om vir boodskappe te luister (selfs nadat die eksterne skrif voltooi is) totdat dit beëindig word.
Om 'n webwerker en gratis blaaier-/rekenaarhulpbronne te beëindig, gebruik die
terminate()metode:
w.terminate();
Hergebruik die Web Worker
As jy die werkerveranderlike op ongedefinieerd stel, nadat dit beëindig is, kan jy die kode hergebruik:
w = undefined;
Volledige webwerker voorbeeldkode
Ons het reeds die Werker-kode in die .js-lêer gesien. Hieronder is die kode vir die HTML-bladsy:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker()
{
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Webwerkers en die DOM
Aangesien webwerkers in eksterne lêers is, het hulle nie toegang tot die volgende JavaScript-objekte nie:
- Die venster voorwerp
- Die dokument voorwerp
- Die ouer-objek