9.2 Dedicated Worker

中譯：「專有 Worker」或「一般 Worker」。

範例

建立相關檔案及原始碼：

html5/worker/worker.html 檔案。
html5/worker/js_worker/worker.js 檔案。

原始碼：

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title>Dedicated Worker(專有 Worker 或 稱做一般 Worker)</title>
  </head>
  <body>
    <p>計數器：<span id="result"></span></p>
    <button type="button" id="start_worker">啟動 Worker</button>
    <button type="butotn" id="stop_worker">停止 Worker</button>

    <script>

      var worker;
      var btn_start_worker = document.getElementById("start_worker");
      var btn_stop_worker = document.getElementById("stop_worker");

      btn_start_worker.addEventListener("click", function(){
        console.log(worker);
        if(window.Worker){
          
          if(!worker){
            // 建立一個 Dedicated Worker
            worker = new Worker("./js_worker/worker.js");
            
            // worker 監聽 message 事件，看是否有回傳資料，有的話就觸發 message 事件
            worker.addEventListener("message", function(e){
              document.getElementById("result").innerHTML = e.data;
            });
            
          }else{
            alert("已啟用");
          }
          
        }else{
          alert("瀏覽器不支援 Worker");
        }
      });
      
      btn_stop_worker.addEventListener("click", function(){
        if(worker){
          worker.terminate(); // 停止 worker 的執行
          worker = undefined;
        }else{
          alert("worker 未啟用");
        }
      });
    </script>
  </body>
</html>

// 寫法 1
var i = 0;
function timesCount() {
  i++;
  self.postMessage(i);

  setTimeout(function(){
    timesCount();
  }, 1000);
}
timesCount();

// 寫法 2
/*
var i = 0;
function timesCount() {
  i++;
  self.postMessage(i);
}
timesCount();
setInterval(function(){
  timesCount();
}, 1000);
*/

功能

按下「啟動 Worker」按鈕後，Worker 每隔一秒就回傳資料給頁面(主執行緒)。若要停止 Worker 的執行的話，可按下「停止 Worker」按鈕，就可以清除 Worker 的執行。

結果示意

在主執行緒中，建立 Dedicated Worker

var worker;

// 建立一個 Dedicated Worker
worker = new Worker("./js_worker/worker.js");

在主執行緒中，監聽是否有資料從 Worker 中傳過來

資料可透過 e.data 取得：

// worker 監聽 message 事件，看是否有回傳資料，有的話就觸發 message 事件
worker.addEventListener("message", function(e){
  document.getElementById("result").innerHTML = e.data;
});

在主執行緒中，清除 Worker

// 停止 worker 的執行
worker.terminate();

// 將 worker 變數，設定成 undefined
worker = undefined;

在 Worker 中，執行倒數計數的兩種寫法

在 worker 中，可使用 self 關鍵字，來代表 worker 本身。(也可省略不寫)。

寫法 1：

var i = 0;
function timesCount() {
  i++;
  self.postMessage(i);

  setTimeout(function(){
    timesCount();
  }, 1000);
}
timesCount();

寫法 2：

var i = 0;
function timesCount() {
  i++;
  self.postMessage(i);
}
timesCount();
setInterval(function(){
  timesCount();
}, 1000);

Previous9.1 簡介 Next10. 作業

Last updated 10 months ago