怎樣在JavaScript中建立一個worker執行緒？

王铁柱6發表於2024-11-27
JavaScript執行緒

在 JavaScript 中建立一個 worker 執行緒，你需要使用 Worker 建構函式，並傳入 worker 指令碼的 URL。以下是一個簡單的例子：

1. 建立主執行緒指令碼 (main.js):

// 檢查瀏覽器是否支援 Web Workers
if (typeof(Worker) !== "undefined") {
  // 建立新的 worker 執行緒
  const myWorker = new Worker("worker.js");

  // 向 worker 傳送訊息
  myWorker.postMessage("Hello from main thread!");

  // 監聽 worker 傳送回來的訊息
  myWorker.onmessage = function(e) {
    console.log("Message received from worker:", e.data);
  };

  // 處理 worker 發生的錯誤
  myWorker.onerror = function(e) {
    console.error("Worker error:", e.message);
  };

  // 可選：終止 worker
  // myWorker.terminate();

} else {
  // Web Workers 不受支援
  console.error("Sorry, your browser does not support Web Workers.");
}

2. 建立 worker 指令碼 (worker.js):

// 監聽主執行緒傳送的訊息
self.onmessage = function(e) {
  console.log("Message received from main thread:", e.data);

  // 執行一些耗時的操作
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // 將結果傳送回主執行緒
  self.postMessage("Result: " + result);
};

關鍵點解釋:

  • new Worker("worker.js"): 這是建立 worker 的核心。worker.js 是 worker 指令碼的路徑。這個路徑必須是相對於主執行緒 HTML 檔案的路徑，或者是一個絕對 URL。

  • postMessage(): 用於在主執行緒和 worker 執行緒之間傳遞資料。可以傳遞任何可以被結構化克隆演算法處理的資料型別，包括字串、數字、陣列、物件等。

  • onmessage: 用於接收來自另一個執行緒的訊息。e.data 包含訊息的內容。

  • onerror: 用於處理 worker 執行緒中發生的錯誤。

  • terminate(): 主執行緒可以呼叫此方法立即終止 worker。

  • self: 在 worker 指令碼中，self 指的是 worker 的全域性作用域。

如何使用:

  1. 建立兩個檔案：main.js 和 worker.js。
  2. 將上面的程式碼分別複製到這兩個檔案中。
  3. 在你的 HTML 檔案中引入 main.js：
<!DOCTYPE html>
<html>
<head>
  <title>Web Worker Example</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>
  1. 開啟 HTML 檔案，你應該會在瀏覽器的控制檯中看到來自主執行緒和 worker 執行緒的訊息。

重要注意事項:

  • Worker 執行緒執行在與主執行緒不同的全域性上下文中，它們不能直接訪問主執行緒的 DOM 或全域性變數。
  • 資料在主執行緒和 worker 執行緒之間傳遞是透過複製進行的，而不是共享記憶體。 這有助於避免併發問題，但也意味著大型資料的傳遞可能會比較耗時。
  • 確保 worker.js 檔案的路徑是正確的。

這個例子演示瞭如何在 JavaScript 中建立一個簡單的 worker 執行緒。你可以根據自己的需求修改 worker 指令碼中的程式碼，使其執行更復雜的任務。記住，使用 worker 執行緒的主要目的是將耗時的操作從主執行緒中分離出來，以避免阻塞使用者介面。

相關文章