KOMPOOS.NL

webworkers - javascript

home » javascripts » webworkers-javascript.html

voorbeeld van een webworker

uitleg webworker(s)

Als IE ook de webworkers zou ondersteunen, zou iedereen perfect presterende web-pagina's kunnen (gaan) maken. Jammer dat door de onwil van Microsoft er nog steeds alternative procedures nodig zijn om alles "cross browser" te houden. Maar als we IE even "vergeten" dan is er op deze pagina toch wel iets "leuks" te zien: de webworker in aktie!

Met webworkers kan je allerlei "klusjes" op de achtergrond uitvoeren zonder dat je de UI "bevriest", en zonder dat je de pagina vertraagt. Plaats gewoon dit voorbeeld op jouw webruimte en probeer de procedure maar uit. De weg wijst zichzelf. Plaats de code voor "webworker.js" in een file met die naam, en plaats de stylesheet en de overige code op de daarvoor bestemde plaatsen. Dus: de stylesheet in de head-sectie, het javascriptje wat de "worker" regelt, zo laag mogelijk in de body-sectie, en de html-code op de plaats waar je de "worker-output" wilt zien. De webworker wordt gestart bij de body-tag.
<body onload="webwerker();">
maar elke andere manier is natuurlijk ook goed...

stylesheet van deze webworker-pagina


<style type="text/css">
        #show_de_webworker{
                display:block;
                width:460px;
                height:80px;
                line-height:80px;
                background:#040;
                color:#bfb;
                font-size:22px;
                text-align:center}
</style>

html-code van de webworkers-procedure


<p id="show_de_webworker"></p>

webworker-javascript van deze pagina


<script>
        function webwerker(){
                var werker = new Worker('webworker.js');
                werker.onmessage = function (event) {
                document.getElementById('show_de_webworker').textContent = event.data;};}
</script>

inhoud van de webworker.js


var webworker_teller = 0, webworker_boodschap, webworker_timer, variatie = 0, fire = 0;
function ik_ben_een_webworker(){
   webworker_teller++;
   if(webworker_teller < 16 && webworker_teller > 11){
      webworker_boodschap = "we gaan weer terug naar het begin";
      postMessage(webworker_boodschap);
      if(webworker_teller > 14){webworker_teller = 0;variatie = 1}
   }
   if(webworker_teller < 12 && webworker_teller > 7){
      webworker_boodschap = "Ik ben klaar met werken";
      fire=1;
   }
   if(webworker_teller < 8){
      webworker_boodschap = "Ik ben druk bezig";
      fire=1;
   }
   if(webworker_teller < 4){
      if(variatie === 1)
         {webworker_boodschap = "daar ben ik weer!"}
      if(variatie === 0)
         {webworker_boodschap = "hallo daar! Ik ben een webworker"}
      fire=1;
   }
   if(fire === 1){
      fire = 0;
      postMessage(webworker_boodschap);
   }
}
webworker_timer = setInterval(function() {ik_ben_een_webworker();},1600);