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.

Sokongan penyemak imbas

Internet Explorer

Internet Explorer 10, Firefox, Chrome, Safari dan Opera semuanya menyokong pekerja Web.

Instance Pekerja Web HTML5

Contoh berikut mencipta pekerja web ringkas yang dikira di latar belakang:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button> 
<button onclick="stopWorker()">停止工作</button>

<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>

<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 = "抱歉，你的浏览器不支持 Web Workers...";
    }
}

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

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat tika dalam talian

demo_workers.js kod fail:

var i=0 ;

fungsi timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();


Kesan sama ada penyemak imbas menyokong Web Worker

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

if(typeof(Worker)!=="undefined")
{
// Ya! /
Sesetengah kod.....}
lain
{
// Maaf Tiada sokongan Pekerja Web..
}


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 dalam 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="".

←
→