Pembahasan belajar html5 kali ini adalah web workers. Apa yang dimaksud dengan web workers? Web workers adalah JavaScript yang berjalan di latar belakang, tanpa mempengaruhi kinerja halaman. Sering ketika menjalankan script dalam halaman HTML, halaman/ page menjadi tidak responsif sampai script selesai. Nah, dengan html5 web workers ini tidak mempengaruhi kinerja halaman apabila javascript sedang bekerja / running. Kita dapat terus melakukan apapun yang kita inginkan: mengklik, memilih sesuatu, dll, sedangkan web workers HTML5 berjalan di latar belakang / background.
Perhatikan contoh dibawah ini, contoh sederhana dari web workers HTML5 untuk menghitung angka di background :
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id=”result”></output></p>
<button onclick=”startWorker()”>Start Worker</button>
<button onclick=”stopWorker()”>Stop Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!==”undefined”)
{
if(typeof(w)==”undefined”)
{
w=new Worker(“demo_workers.js”);
}
w.onmessage = function (event) {
document.getElementById(“result”).innerHTML=event.data;
};
}
else
{
document.getElementById(“result”).innerHTML=”Sorry, your browser does not support Web Workers…”;
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
Mari kita coba belajar HTML5 Web Workers bagian demi bagian:
Sebelum membuat web workes, dicheck terlebih dahulu apakah web browsernya support web workers apa tidak :
if(typeof(Worker)!==”undefined”)
{
// Yes! Web worker support!
// Some code…..
}
else
{
// Sorry! No Web Worker support..
}
Sekarang, mari membuat web workers dalam external javascript, Disini kita akan membuat script penghitung yang akan di simpan sebagai “demo_workers.js”
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout(“timedCount()”,500);
}
timedCount();
Bagian penting dari kode di atas adalah metode PostMessage () – yang digunakan untuk posting pesan kembali ke halaman HTML.
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
Baris berikut memeriksa apakah workers sudah ada apa belum, jika tidak – itu menciptakan objek web pekerja baru dan menjalankan kode di “demo_workers.js”:
if(typeof(w)==”undefined”)
{
w=new Worker(“demo_workers.js”);
}
Kemudian, kita mengirim dan menerima pesan dari web workers. Tambahkan event “onmessage” kedalam web workers :
w.onmessage=function(event){
document.getElementById(“result”).innerHTML=event.data;
};
- Untuk menghentikan pekerja web, dan bebas browser / komputer sumber, gunakan mengakhiri () metode:
w.terminate();
0 comments:
Post a Comment