Pekerja Web HTML5

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 10, Firefox, Chrome, Safari dan Opera semuanya menyokong pekerja Web.

Contoh Pekerja Web HTML5

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

<!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 atur cara untuk mencubanya

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, semak sama ada penyemak imbas pengguna menyokongnya:

if(typeof(Worker)!= = "undefined")
{
// Sokongan pekerja web!
// Kod berkaitan....
}
lain
{
// Maaf Tiada Web Sokongan Pekerja..
}

Buat fail pekerja web

Sekarang, mari Buat web kami pekerja 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="".

Menamatkan Pekerja Web

Apabila kami mencipta objek pekerja web, ia 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 Worker dalam fail .js. Berikut ialah kod untuk halaman HTML:

<!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>

Pekerja Web dan DOM

Memandangkan pekerja web terletak dalam fail luaran , mereka tidak boleh diakses Objek JavaScript berikut:

objek tingkap
objek dokumen
objek induk

Meneruskan pembelajaran

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik