首頁 > web前端 > H5教程 > 主體

HTML5-Web Worker APIs的程式碼詳解

黄舟
發布: 2017-04-01 11:28:24
原創
1570 人瀏覽過

1.概述
  HTML5 Web Worker可以讓Javascript程式在後台單執行緒執行大量耗時的計算任務。 Web Worker在執行時無法直接存取DOM。 Web Worker也會消耗CPU和系統資源。 Web Worker與頁間的通訊可以透過Web Worker的方法postMessage和message事件

2.瀏覽器支援偵測

 function loadDemo() 
   { 
      
if
 (typeof(Worker) !== "undefined") 
      { 
         
document
.getElementById("support").innerHTML =  
            "Excellent! Your browser supports HTML5 Web Workers"; 
      } 
   }
登入後複製

3.worker物件
  worker物件是window物件的子物件,它有以下幾個方法:
  •Worker(jsFile_URL):建構函數,參數是一個用來執行Web Worker任務的JavaScript檔案的URL位址,可以是相對或絕對位址。可以遞歸建立worker。在頁面調用。
  •terminate():終止worker,終止後不能再重複使用,只能重建。
在頁面呼叫。
  •close():終止worker,在Worker內呼叫。
  •importScripts(jsFile_1_URL, jsFile_2_URL, ... ):非同步地向一個已存在的worker導入JavaScript文件,JavaScript的依照參數的順序執行。在Worker腳本內部呼叫。
  •postMessage(msg):建立werker的頁面與worker之間通訊的方法,例如:

    // -------------由页面向worker
发送消息
------------------
      document.getElementById("helloButton").
onclick
 = function() { 
         worker.postMessage("Here's a message 
for
 you"); 
      }
      // -------------页面接收来自worker的消息----------------      
      worker.addEvent
List
ener("message", messageHan
dl
er, true); 
      function messageHandler(e) { 
         // process message from worker 
      } 
      // -------------JavaScript
文件处理
来自页面的消息----------------
      addEventListener("message", messageHandler, true);
      function messageHandler(e) { 
         postMessage("worker says: " + e.data + " too"); 
      }
登入後複製

4.錯誤處理

#
 // -------------在页面处理来自worker的消息----------------
   worker.addEventListener("error", errorHandler, true);
   function errorHandler(e) { 
      console.log(e.message, e); 
   }
登入後複製

5.使用計時器
  儘管worker不能直接存取DOM中的對象,但可以完全使用window對像中與時間有關的方法和屬性,也可以使用部分其他屬性。如:

  var t = 
set
Time
out(postMessage, 2000, "delayed message");
登入後複製

以上是HTML5-Web Worker APIs的程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板