创建web workers

最新推荐文章于 2024-10-08 12:21:22 发布

刘春强

最新推荐文章于 2024-10-08 12:21:22 发布

阅读量192

点赞数

文章标签：前端 linux apache

本文链接：https://blog.csdn.net/kevin_lcq/article/details/133783663

版权

本文介绍了如何在JavaScript中创建和使用WebWorker，包括创建Worker脚本、在主线程中创建Worker对象、发送和接收消息，以及如何结束Worker。示例展示了如何通过按钮操作启动和停止Worker的交互过程。

摘要由CSDN通过智能技术生成

创建一个 Worker 脚本文件：首先，你需要创建一个 JavaScript 文件，这个文件将包含 Worker 线程将要执行的代码。

// worker.js
self.addEventListener('message', function(e) {
  const data = e.data;
  switch (data.cmd) {
    case 'start':
      self.postMessage('WORKER STARTED: ' + data.msg);
      break;
    case 'stop':
      self.postMessage('WORKER STOPPED: ' + data.msg);
      self.close(); // Terminates the worker.
      break;
    default:
      self.postMessage('Unknown command: ' + data.msg);
  }
}, false);

在主线程中创建 Worker 对象：使用 Worker 构造函数创建一个新的 Worker 对象，并指定 Worker 脚本文件的 URL。

// main.js
const myWorker = new Worker('worker.js');

发送和接收消息：使用 postMessage 方法发送消息到 Worker，使用 onmessage 事件监听器接收来自 Worker 的消息。

// 发送消息到 Worker
myWorker.postMessage({ cmd: 'start', msg: 'Hello, Worker!' });

// 接收来自 Worker 的消息
myWorker.onmessage = function(e) {
  console.log('Message received from worker: ' + e.data);
};

结束 Worker：如果你想结束一个 Worker，可以调用 Worker 对象的 terminate 方法，或者在 Worker 内部调用 self.close()。

// 在主线程中结束 Worker
myWorker.terminate();

// 或在 Worker 脚本中结束自己
self.close();

完整的 HTML 示例

<!DOCTYPE html>
<html>
<head>
  <title>Web Worker Example</title>
</head>
<body>
  <button onclick="startWorker()">Start Worker</button>
  <button onclick="stopWorker()">Stop Worker</button>

  <script>
    let myWorker;

    function startWorker() {
      if (typeof(Worker) !== "undefined") {
        myWorker = new Worker("worker.js");
        myWorker.postMessage({ cmd: 'start', msg: 'Hello, Worker!' });
        myWorker.onmessage = function(event) {
          console.log('Message received from worker: ' + event.data);
        };
      } else {
        console.log("Sorry, your browser does not support Web Workers.");
      }
    }

    function stopWorker() {
      myWorker.postMessage({ cmd: 'stop', msg: 'Bye, Worker!' });
      myWorker.terminate();
      myWorker = undefined;
    }
  </script>
</body>
</html>

这样，你就成功创建了一个 Web Worker，并通过消息与其进行了交互。