masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pekerja Web HTML5

Pekerja Web

Memperkenalkan konsep pekerja web dalam spesifikasi html5 untuk menyelesaikan masalah bahawa JavaScript sisi klien tidak boleh berbilang benang kod, tetapi web Pekerja berada dalam persekitaran serba lengkap dan tidak boleh mengakses objek tetingkap dan objek dokumen utas utama Ia hanya boleh berkomunikasi dengan utas utama melalui mekanisme penghantaran mesej tak segerak

. Kita perlu meletakkan kod JavaScript yang ingin kita laksanakan secara berasingan ke dalam fail js yang berasingan, dan kemudian memanggil pembina Pekerja dalam halaman untuk mencipta utas Parameter ialah laluan fail Jika storan parameter ialah alamat relatif, maka skrip yang mengandungi pernyataan yang memanggil pembina Pekerja harus digunakan sebagai rujukan Jika ia adalah laluan mutlak, Ia adalah perlu untuk memastikan asal yang sama (protokol + hos + port). Fail ini tidak memerlukan kami menggunakan teg skrip untuk memaparkan rujukan pada halaman

var worker=new Worker('js/worker.js');

Mudah Contoh kecil

Paparkan semua nombor dari 0 hingga 10000 yang boleh dibahagi dengan n pada halaman Sudah tentu, kami tidak menggunakan i*n untuk membuat pengiraan sedikit lebih rumit

index.html 

<!DOCTYPE html>
<html>
<head>
    <title>Web Workers</title>
</head>
<body>
  <h1>Web Workers</h1>
      <div id="test" style="width:500px;"></div>
    <script type="text/javascript">
        var worker=new Worker('js/worker.js');
        worker.postMessage({
            n:69
        });
        worker.onmessage=function(e){
            var test=document.getElementById('test').innerHTML=e.data;        
        };
    </script>
</body>
</html>

/js/worker.js

function calc(n){
    var result=[];
    for(var i=1;i<10000;i++){
        var tem=i;
        if(i%n==0){
            if(i%(10*n)==0){
                tem+='<br/>';
            }
            result.push(tem);
        }
    }

    self.postMessage(result.join(' '));
    self.close();
}

onmessage=function(e){
    calc(e.data.n);
};

Kesan paparan:

1018.png

Buat fail pekerja web

Sekarang, Mari cipta 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.

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

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

Kemudian kita boleh berlaku daripada pekerja web dan Menerima mesej .

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();




Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- web worker是运行在后台的javascript，不会影响页面的性能 --> <p>计数:<output id="result"></output></p> <button onclick="startWorker()">开始worker</button> <button onclick="endWorker()">停止worker</button> <br><br> <script type="text/javascript"> var w; function startWorker(){ if(typeof(Worker)!="undefined"){//浏览器支持web worker if(typeof(w)=="undefined"){//w是未定义的,还没有开始计数 w = new Worker("webworker.js");//创建一个Worker对象,利用Worker的构造函数 } //onmessage是Worker对象的properties w.onmessage = function(event){//事件处理函数,用来处理后端的web worker传递过来的消息 document.getElementById("result").innerHTML=event.data; }; }else{ document.getElementById("result").innerHTML="sorry,your browser does not support web workers"; } } function endWorker(){ w.terminate();//利用Worker对象的terminated方法,终止 w=undefined; } </script> <p>在后台运行的web worker js文件,webworker.js 才能实现效果<br> var i = 0; <br> function timeCount(){ <br> i = i + 1; <br> postMessage(i);//postMessage是Worker对象的方法，用于向html页面回传一段消息 <br> setTimeout("timeCount()",500);//定时任务 <br> } <br> timeCount();//加1计数,每500毫秒调用一次</p> </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)  492455 permainan