io.socket 在函数声明内部未定义，在其外部定义答案

【问题标题】：io.socket is undefined inside function declaration, defined outside itio.socket 在函数声明内部未定义，在其外部定义
【发布时间】：2014-10-07 17:37:15
【问题描述】：

所以我正在尝试使用 io.socket 对某些控制器操作进行 POST 调用。奇怪的是，当我在这样的脚本标签中使用io.socket.someMethod() 时，它工作正常：

<script>
io.socket.post('/visualization/star', { id: visualID }, function (resData, jwres) {
  var star = document.getElementById("star-" + visualID.toString());
  if (star.className == "gold-star glyphicon glyphicon-star-empty md") {
    star.className = "grey-star glyphicon glyphicon-star-empty md";
  } else {
    star.className = "gold-star glyphicon glyphicon-star-empty md";
  }
});
</script>

但是将它放在函数声明中会使io.socket 变为undefined：

<script>
function starVisual(visualID) {
  io.socket.post('/visualization/star', { id: visualID }, function (resData, jwres) {
    var star = document.getElementById("star-" + visualID.toString());
    if (star.className == "gold-star glyphicon glyphicon-star-empty md") {
      star.className = "grey-star glyphicon glyphicon-star-empty md";
    } else {
      star.className = "gold-star glyphicon glyphicon-star-empty md";
    }
  });
}
</script>

将alert(io.socket) 放在函数声明之外会产生一个对象，而将它放在函数声明内的第一行会产生undefined。

我也尝试过window.io.socket，但结果相同。当页面首次通过我的layouts.ejs 加载时，JS 文件sails.io.js 已包含并在开始时正确加载。也尝试过<script>window.io = io</script> 无济于事。

我将它放在函数声明中，以便在单击图标时将其用作 onclick 属性的一部分： <td class="star-wrap"><span id="star-<%= visualization.id %>" class="grey-star glyphicon glyphicon-star-empty md" onclick="starVisual(<%= visualization.id %>).bind(this);"></span></td>

任何帮助将不胜感激！

【问题讨论】：

标签： javascript node.js sockets sails.js

【解决方案1】：

我已经像你一样设置了我的功能，一切看起来都很开心。

问题可能是竞争条件。 sails.io 脚本加载在正文的底部（确保将脚本放在其下）。如果你在脚本加载之前console.log() 任何东西，你会得到未定义的错误。

【讨论】：

实际上，因为我需要提前加载它，所以我在 layouts.ejs 的顶部手动加载了脚本，而不是在最后使用 Grunt 自动加载它。我昨晚确实在 Sails IRC 中找到了解决方案：在相同的脚本标签中但在脚本声明之外使用 window.socket = io.socket，然后使用 window.socket.post。

【解决方案2】：

如果有人遇到这个问题，为了以后参考，我通过执行以下操作解决了这个问题：

<script>
window.socket = socket.io
function starVisual(visualID) {
io.socket.post('/visualization/star', { id: visualID }, function (resData, jwres) {
  var star = document.getElementById("star-" + visualID.toString());
  if (star.className == "gold-star glyphicon glyphicon-star-empty md") {
    star.className = "grey-star glyphicon glyphicon-star-empty md";
  } else {
    star.className = "gold-star glyphicon glyphicon-star-empty md";
    }
  });
}
</script>

【讨论】：