JavaScript 中怎么用 onmessage 监听后台线程返回的计算结果-js教程-PHP中文网

onmessage是worker实例的属性，用于监听后台线程发来的消息，必须绑定到具体worker对象而非全局使用；支持直接赋值或addeventlistener方式，后者更灵活可多次绑定。

javascript 中怎么用 onmessage 监听后台线程返回的计算结果

在 JavaScript 中，onmessage 用于监听 Web Worker（后台线程）发来的消息，核心是给 Worker 实例绑定事件处理器。它不是全局方法，也不能直接写在主线程脚本顶部，必须作用于具体的 Worker 对象。

1. 创建并启动 Worker 线程

先确保你有一个独立的 JS 文件（比如 calculator.js），它将在后台运行：

calculator.js

self.onmessage = function(e) {
  const { type, data } = e.data;
  if (type === 'calculate') {
    const result = data * data; // 示例：计算平方
    self.postMessage({ type: 'result', value: result });
  }
};

在主线程中创建 Worker，并立即设置 onmessage 监听返回结果：

main.js

const worker = new Worker('calculator.js');
<p>// ✅ 正确：为 worker 实例绑定 onmessage
worker.onmessage = function(e) {
const { type, value } = e.data;
if (type === 'result') {
console.log('后台算出结果：', value); // 如：100
}
};</p><p>// 向后台线程发送任务
worker.postMessage({ type: 'calculate', data: 10 });</p>

2. 使用 addEventListener 更灵活（推荐）

onmessage 是简写方式，但只能绑定一个处理函数；用 addEventListener 可多次监听、便于解绑：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

const worker = new Worker('calculator.js');
<p>worker.addEventListener('message', function(e) {
const { type, value } = e.data;
if (type === 'result') {
document.getElementById('output').textContent = value;
}
});</p><p>worker.postMessage({ type: 'calculate', data: 42 });</p>

3. 注意事项和常见坑

数据是结构化克隆，不是引用传递：不能传函数、DOM 节点或带有循环引用的对象；复杂数据建议用 JSON.stringify + JSON.parse 显式处理
主线程和 Worker 之间不共享变量：Worker 里改 self.x = 1 不会影响主线程的任何变量
错误需单独监听：加上 worker.onerror 或 worker.addEventListener('error', ...) 捕获运行异常
记得终止 Worker（可选）：任务完成后调用 worker.terminate() 释放资源，尤其在单页应用中避免内存泄漏

4. 完整可运行小例子

新建 worker.js：

self.onmessage = function(e) {
  const nums = e.data;
  const sum = nums.reduce((a, b) => a + b, 0);
  self.postMessage(sum);
};

页面中使用：

const w = new Worker('worker.js');
w.onmessage = e => alert('总和是：' + e.data);
w.postMessage([1, 2, 3, 4, 5]); // 弹出 15

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南