如何将BroadcastChannel.onmessage接收的Worker数据存入变量？

先修正语法错误 #

你写的代码里有个明显的语法问题——把普通函数声明和箭头函数写法混在一起了，这会导致回调函数根本无法正常执行，自然没法更新外层的x。正确写法二选一：

箭头函数写法 #

var x = "";
channel.onmessage = (event) => {
  x = event.data;
  console.log("x已更新：", x); // 这里能看到正确赋值后的结果
};

普通函数写法 #

var x = "";
channel.onmessage = function(event) {
  x = event.data;
  console.log("x已更新：", x);
};

注意异步执行的特性 #

onmessage是异步触发的回调，如果你在定义完回调后立刻打印x，此时回调还没执行，x还是初始的空字符串。比如下面的代码结果会不符合预期：

var x = "";
channel.onmessage = (event) => {x = event.data};
console.log(x); // 打印空字符串，因为回调还没触发

必须等Worker发送消息、回调执行完成后，x才会被更新。你可以在回调内部直接处理更新后的x，或者用Promise封装来等待数据就绪：

var x = "";
// 用Promise封装等待数据的逻辑
const waitForData = new Promise(resolve => {
  channel.onmessage = (event) => {
    x = event.data;
    resolve(x);
  };
});

// 等待数据更新后再处理业务逻辑
waitForData.then(updatedX => {
  console.log("最终x的值：", updatedX);
  // 在这里写需要用到x的代码
});

关于作用域的补充 #

你特意用var规避作用域问题其实没必要，let/const也不会有这个问题——只要回调函数是在x的作用域内定义的，就能正常访问并修改它。之前的问题核心是语法错误，不是作用域。

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