HTML5 Web Workers

JavaScript komutlarının uzun süre almasından kaynaklanan sorunu çözmek için geliştirilen Web Workers ile ilgili bilgiler ve örnek yer alıyor.

Web Workers nedir

Web Workers JavaScript komutlarının arka planda çalışmasını sağlar.

Web Workers arka planda JavaScript komutlarını çalıştırırken kullanıcı sitede dolaşmaya devam edebilir.

Web Workers kullanmadan önce tarayıcı desteğini kontrol etmeyi unutmayın!

if (typeof (Worker) !== "undefined") {
  // Web workers işlemleri
} else {
  alert("Tarayıcınız Web Workers API desteklemiyor.");
}

Oluşturma

JavaScript komutlarının olduğu harici bir dosya oluşturalım.

Oluşturduğumuz dosyaya script.js ismini verelim ve içeriğine aşağıdaki komutları yazalım.

var sayi = 0;

function sayiArttir() {
  sayi = sayi + 1;
  postMessage(sayi);
  setTimeout("sayiArttir()", 500);
}

sayiArttir();

Komut içerisindeki postMessage metodu sayfaya veri göndermek için kullanılır.

Web Workers API fazla CPU kullanan komutlar için kullanılır.

Örnek olması amacıyla basit komutlar kullanılmıştır.

Çalıştırma

Web Workers oluşturduktan çalıştırmamız gerekir.

Komut önceden tanımlamış bir Web Workers olup olmadığını denetler ve eğer tanımlanmamışsa tanımlar.

if (typeof (w) == "undefined") {
  w = new Worker("script.js");
}

Nesne oluştuktan sonra postMessage ile gönderilen verilerin alınması gerekir.

Web Workers nesnesinin onMessage özelliği ile gelen sonuçlar alınır.

w.onmessage = function (o) {
  document.getElementById("sonuc").innerHTML = o.data;
}

Web Workers komut sonuçlarını almaya başlar.

Aldığı sonuçları parametrenin data özelliğinde saklar.

Sonlandırma

Web Workers başladıktan sonra harici dosyadaki komut çalışmasını durdursa bile bilgi almaya devam eder.

Web Workers işlemi terminate metodunu ile sonlandırılır.

w.terminate();

Yeniden kullanmak

Web Workers nesnesini yeniden kullanmak için ilk olarak Web Workers işlemini sonlandırmalı, daha sonra Web Workers değişken değeri undefined yapılmalıdır.

w = undefined;

Web workers örneği

<p>Sayı : <output id="sonuc"></output></p>
<button onclick="calistir()">Web Workers çalıştır</button>
<button onclick="durdur()">Web Workers durdur</button>

<script>
var w;

function calistir() {
  if (typeof (Worker) !== "undefined") {
    if (typeof (w) == "undefined") {
      w = new Worker("script.js");
    }

    w.onmessage = function (o) {
      document.getElementById("sonuc").innerHTML = o.data;
    }

  } else {
    alert("Tarayıcınız Web Workers API desteklemiyor.");
  }
}

function durdur() {
  w.terminate();
  w = undefined;
}
</script>

var sayi = 0;

function sayiArttir() {
  sayi = sayi + 1;
  postMessage(sayi);
  setTimeout("sayiArttir()", 500);
}

sayiArttir();

Web Workers erişim

Web Workers harici dosyada işlem yaptığından aşağıdaki nesnelere erişemeyecektir.

• window nesnesi
• document nesnesi
• parent nesnesi

Örnek kodları incelemek için tıklayın.

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.