H5中的web worker示例demo分析


web worker 是運行在后台的 JavaScript,不會影響頁面的性能。

什么是 Web Worker?

當在 HTML 頁面中執行腳本時,頁面的狀態是不可響應的,直到腳本已完成。

web worker 是運行在后台的 JavaScript,獨立於其他腳本,不會影響頁面的性能。您可以繼續做任何願意做的事情:點擊、選取內容等等,而此時 web worker 在后台運行。

瀏覽器支持

所有主流瀏覽器均支持 web worker,除了 Internet Explorer。

使用前先檢測是否支持web worker

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

 先創建一個js文件,命名為‘demo_workers.js’ ,代碼如下。其實本質上是一個延遲的遞歸函數。每隔1s調用自己,i+1.

var i=0;
function timedCount(){
     i=i+1;
	console.log(i)
	postMessage(i);//向其他窗口或者頁面發送消息
	setTimeout("timedCount()",1000);
}
timedCount();

然后在同級下,新建個html文件

<!DOCTYPE html>
	<meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<body>
<p>計數器: <output id="result"></output></p>
	<button onclick="startWorker()">Start Worker</button>
	<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<script>
	var w;
	function startWorker(){
	  if(typeof(Worker)!=="undefined"){//判斷Worker api 支持否
  	    if(typeof(w)=="undefined"){//w變量必須是未定義過的,重復點擊對消息的接收並不會產生影響,即使你手速再快。
    	      w=new Worker("demo_workers.js"); //創建worker對象 括號內填url
//注意文件引入路徑,如果是在同級文件js文件夾里,則 w=new Worker("./js/demo_workers.js");     }          w.onmessage = function (event){//html5提供的postMessage和onMessage這一對方法來在不同的文檔頁或者不同的工作線程之間進行通信。onmessage作用是接收消息       document.getElementById("result").innerHTML=event.data;//event為對應的事件,postMessage發送出來的i值在該對象的data屬性中。
           console.log('觸發w')     };        }else{ document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";   } } function stopWorker(){   w.terminate();//終止接收,此時js文件中的i值就卡在了如下圖的13,斷開接收它就自動暫停執行timeCount,停止該JS文件內的線程。然后下次再重新計數時,引入文件i又重置為0. } </script> </body> </html>

上右側圖,可以看出,每次postMessage發送消息過來,w都會去時時監聽該消息。

執行效果如下:從右邊可以看出,當點擊停止計數時,js文件內部的timeCount函數也會停止計數的。即停止了消息接受后,消息源也會停止執行。

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM