HTML5通过Web Workers实现协作式可取消长任务，需Worker主动轮询AbortSignal或自定义取消消息，无法强制终止；主线程调用abort()后，Worker应检查signal.aborted并及时清理退出。
HTML5 本身不支持真正的多线程后台任务（如操作系统级线程），但可通过 Web Workers 实现与主线程隔离的长时间 JavaScript 执行，并配合 AbortController 或自定义通信协议实现任务取消逻辑。关键在于：Worker 内部需主动轮询取消信号，无法强制终止。
使用 Web Worker + AbortSignal 实现可取消长任务
现代浏览器支持将 AbortSignal 传入 Worker（通过 worker.postMessage() 配合 transferable 对象），Worker 内监听 signal.aborted 并适时退出循环或返回。
- 主线程创建
AbortController，调用controller.signal并通过postMessage({ signal }, [signal])传给 Worker（注意 signal 是 transferable） - Worker 中接收 signal，用
signal.addEventListener('abort', ...)或轮询signal.aborted - 在耗时操作（如大数组遍历、加密计算）中定期检查
if (signal.aborted) return; - 主线程调用
controller.abort()后，Worker 应快速清理并 postMessage 通知完成
兼容性兜底：手动通信模拟取消信号
若目标环境不支持 transferable AbortSignal（如旧版 Safari），可用自定义消息机制替代：
- 主线程向 Worker 发送
{ type: 'start', taskId: 'xxx', cancelId: 'abc' } - Worker 执行中定期
self.postMessage({ type: 'ping', taskId: 'xxx' })并等待主线程响应 - 主线程监听 ping 消息，若收到对应 taskId 且已触发取消，则发
{ type: 'cancel', cancelId: 'abc' } - Worker 收到 cancel 消息后中断当前逻辑，清理资源并上报状态
避免常见陷阱
取消不是“杀死线程”，而是协作式退出：
立即学习“前端免费学习笔记（深入）”；
- Worker 中不能依赖
setTimeout或Promise链自动中断 —— 必须显式检查取消状态 - 阻塞型计算（如密集 for 循环）需拆分为小块，每块后检查 signal，否则无法及时响应
- 避免在 Worker 中持有大量未释放内存（如缓存中间结果），取消时应主动
delete或重置 - 主线程 abort 后，仍需监听 Worker 的结束消息（
worker.onmessage或worker.onterminate），确保 UI 状态同步
简单示例：可取消的素数筛选
主线程：
const worker = new Worker('prime-worker.js');
const controller = new AbortController();
<p>worker.postMessage({
type: 'findPrimes',
max: 1000000,
signal: controller.signal
}, [controller.signal]);</p><p>// 取消任务
setTimeout(() => controller.abort(), 2000);
Worker（prime-worker.js）：
self.onmessage = async ({ data }) => {
if (data.type === 'findPrimes' && data.signal) {
const { max, signal } = data;
const primes = [];
for (let i = 2; i <= max; i++) {
if (signal.aborted) {
self.postMessage({ type: 'cancelled', reason: 'user aborted' });
return;
}
// 简单素数判断（实际应优化）
let isPrime = true;
for (let j = 2; j * j <= i; j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
if (isPrime) primes.push(i);
}
self.postMessage({ type: 'done', result: primes });
}
};
