search

9.2 Dedicated Worker

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

hashtag
範例

建立相關檔案及原始碼：

  • 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>

hashtag
功能

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

hashtag
結果示意

hashtag
在主執行緒中，建立 Dedicated Worker

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

資料可透過 e.data 取得：

hashtag
在主執行緒中，清除 Worker

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

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

寫法 1：

寫法 2：

Previous9.1 簡介Next10. 作業

Last updated