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.

HTML5 Web Workers nedir

Bazen JavaScript komutları çalıştırılırken komut bitene kadar web sayfası görüntülenmez.

HTML5 Web Workers, JavaScript komutlarının sayfa açılışını geçiktirmeden 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.

Tarayıcı desteği

Tablodaki değerler Web Workers destekleyen ilk tarayıcı sürümlerini belirtir.

API Chrome IE / Edge Firefox Safari Opera
Web Workers 4.0 10.0 3.5 4.0 11.5

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

Web Workers 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.

Web Workers çağırma

Web Workers oluşturduktan sonra artık dosyayı ç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. (Örnekte; o.data )

Web Workers 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();

Web Workers 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

HTML sayfa içeriğ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>
JavaScript dosya içeriğivar 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

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir