如何在socket.on回调函数的外部作用域使用其接收到的数据

问题根因 #

你遇到的是两个核心问题叠加导致的：

• 第一是异步执行时序问题：socket.on的回调函数不会在代码初始化阶段执行，只有当服务端主动推送ras_height事件时才会触发，而你写在回调外的console.log是同步执行的，运行时事件还没触发，自然拿不到值。
• 第二是变量遮蔽问题：你回调函数的形参名和全局变量名完全一样，回调内部访问的data_ras_height是局部参数，根本不会给外层的全局变量赋值，就算事件触发了，外层全局变量也还是初始空字符串。

修复方案 #

首先调整代码避免变量遮蔽，再把依赖该数据的逻辑改为事件触发后再执行：

// 全局存储接收的数据
var data_ras_height = "";

socket.on('ras_height', function (receivedHeight) {
  // 把接收到的数据赋值给全局变量
  data_ras_height = receivedHeight;
  document.getElementById("ras_height_text").textContent = data_ras_height;
  console.log('回调内打印：', data_ras_height);
  // 事件触发后，调用依赖该数据的外部逻辑
  handleHeightData();
});

// 把需要用到该数据的外部逻辑封装成独立函数
function handleHeightData() {
  // 这里就能正常拿到最新的接收值
  console.log('外部作用域打印：', data_ras_height);
  // 其他业务逻辑写在这里即可
}

其他适用场景的处理方式 #

• 如果你需要在用户主动交互（比如点击按钮）时读取最新值，直接读取全局变量即可，只要事件已经触发过就能拿到有效值，建议加个加载状态判断避免拿到空值
• 如果需要等待多个异步事件完成再执行逻辑，可以用Promise、状态计数等方式做异步协调

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