Pekerja Web HTML5

Pekerja web menjalankan JavaScript di latar belakang dan tidak akan menjejaskan prestasi halaman.

Apakah Pekerja Web?

Apabila melaksanakan skrip dalam halaman HTML, keadaan halaman tidak bertindak balas sehingga skrip selesai.

Pekerja web adalah JavaScript yang berjalan di latar belakang, bebas daripada skrip lain dan tidak akan menjejaskan prestasi halaman. Anda boleh terus melakukan apa sahaja yang anda mahu: klik, pilih, dsb. semasa pekerja web berjalan di latar belakang.

Kesan sama ada penyemak imbas menyokong Web Worker

Sebelum mencipta pekerja web, sila semak sama ada penyemak imbas pengguna menyokongnya:

if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}

Mencipta fail pekerja web

Sekarang, mari buat pekerja web kami dalam JavaScript luaran.

Di sini kami mencipta skrip pengiraan. Skrip disimpan dalam fail "demo_workers.js":

var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();

Bahagian penting kod di atas ialah kaedah postMessage() - ia digunakan untuk menghantar mesej kembali ke halaman HTML.

Nota: pekerja web biasanya tidak digunakan untuk skrip mudah seperti itu, tetapi untuk tugas yang lebih intensif CPU.

Buat Objek Pekerja Web

Kami sudah mempunyai fail pekerja web, kini kami perlu memanggilnya dari halaman HTML. /p>

Kod berikut mengesan sama ada pekerja itu wujud, jika tidak - ia mencipta objek pekerja web baharu dan kemudian menjalankan kod dalam "demo_workers.js": /p>

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

Kemudian kami boleh menghantar dan menerima mesej daripada pekerja web.

Tambahkan pendengar acara "onmessage" pada pekerja web:

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data ;
};

<pApabila web="" worker="" menghantar mesej, kod dalam pendengar acara akan dilaksanakan. event.data="" mengandungi data daripada ="" event.data="".

Tamatkan Pekerja Web

Apabila kami mencipta objek pekerja web, ia akan terus mendengar mesej (walaupun selepas skrip luaran selesai) sehingga ia ditamatkan.

Untuk menamatkan pekerja web dan melepaskan sumber penyemak imbas/komputer, sila gunakan kaedah terminate():

w.terminate();

Kod contoh Pekerja Web Lengkap

Kami telah melihat kod Pekerja dalam fail .js. Berikut ialah kod untuk halaman HTML:

Contoh

<!DOCTYPE html>
<html>
<body>
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始计数</button> 
<button onclick="stopWorker()">停止计数</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>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <body> <p>计数: <output id="result"></output></p> <button onclick="startWorker()">开始计数</button> <button onclick="stopWorker()">停止计数</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>

serahkan Tetapkan Semula Kod

Operasi automatik