masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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

8.jpg

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
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492411 permainan