嘿，我刚接触Web Worker的时候也踩过这个坑！问题的核心其实很简单：Web Worker是单线程的——一旦它进入一个持续的同步任务（比如你说的循环），事件循环就被完全阻塞了，根本没机会去处理新的消息，直到这个同步任务彻底结束。

那怎么让Worker在忙的时候也能接收消息呢？关键是把你的长任务拆成小块，给事件循环留出处理消息的时间片。下面给你具体的方案和示例：

为什么原来的代码会阻塞？ #

假设你的worker.js原来的代码是这样的：

// 阻塞版worker.js
self.onmessage = (e) => {
  if (e.data === "start") {
    // 无限循环，直接把Worker线程占死
    while (true) {
      console.log("Worker在忙...");
    }
  }
};

这种情况下，Worker一旦进入while循环，就再也不会去看消息队列了，自然收不到新的消息。

解决方案：拆分长任务为可中断的小块 #

我们需要把大任务拆成一个个小任务，每次只处理一部分，然后通过setTimeout或者requestIdleCallback调度下一部分任务——这样每次处理完小块后，Worker的事件循环就有空去处理新的消息了。

改进后的worker.js示例 #

let isTaskRunning = false;
let taskProgress = 0;
const CHUNK_SIZE = 1000; // 每次处理的任务块大小，可以根据你的需求调整

// 处理消息的逻辑
self.onmessage = (e) => {
  switch (e.data.type) {
    case "start":
      isTaskRunning = true;
      processNextChunk(); // 启动任务
      break;
    case "stop":
      isTaskRunning = false;
      postMessage({ type: "status", message: "任务已停止", progress: taskProgress });
      break;
    case "update":
      // 这里可以处理更新任务参数的消息
      postMessage({ type: "status", message: "已收到更新指令" });
      break;
  }
};

// 处理单个任务块的函数
function processNextChunk() {
  if (!isTaskRunning) return;

  // 处理当前小块任务
  for (let i = 0; i < CHUNK_SIZE; i++) {
    taskProgress++;
    // 这里替换成你的实际业务逻辑，比如计算、数据处理等
    if (taskProgress % 10000 === 0) {
      // 可以向主线程发送进度更新
      postMessage({ type: "progress", value: taskProgress });
    }
  }

  // 调度下一个任务块，让出事件循环给消息处理
  // 使用setTimeout(..., 0)让浏览器在当前事件循环结束后执行下一块
  setTimeout(processNextChunk, 0);
  // 如果你想让任务在Worker空闲时再执行，可以用requestIdleCallback
  // requestIdleCallback(processNextChunk);
}

主线程调用示例 #

// 主线程代码
const worker = new Worker("worker.js");

// 发送启动任务的消息
worker.postMessage({ type: "start" });

// 3秒后发送停止消息，Worker能及时响应
setTimeout(() => {
  worker.postMessage({ type: "stop" });
}, 3000);

// 监听Worker的消息
worker.onmessage = (e) => {
  console.log(e.data);
};

关键要点 #

• 永远不要让Worker长时间运行同步代码：单线程的特性决定了同步任务会阻塞消息处理，必须拆分。
• 利用事件循环的间隙：setTimeout(..., 0)和requestIdleCallback能让Worker在处理完当前小块后，先处理消息队列里的新消息，再继续任务。
• 设计清晰的消息协议：比如用type字段区分不同的消息（启动、停止、更新），让Worker能明确处理不同指令。

这样修改后，即使Worker在处理任务，也能随时接收并响应你发送的消息啦！

内容的提问来源于stack exchange，提问作者user2143645