Socket JS 在 onload 方法中不起作用答案

【问题标题】：Socket JS not works inside onload methodSocket JS 在 onload 方法中不起作用
【发布时间】：2021-08-04 12:02:36
【问题描述】：

我有这个用于 django 频道的 js 片段：

 var chatSocketSender1 = new WebSocket(
    'ws://' + window.location.host + '/ws/my_socket1/'
)

function send() {
    var msg =  "some message"
    var receiver_id = 111
    window['chatSocketSender1'].send( JSON.stringify({
        'msg': msg,
        'receiver_id': receiver_id
    }) )
}

document.querySelector('#send_button').onclick = function() {
      send();
}

问题是这个 js 代码只有在我把它放在 HTML 的最新元素之后才有效：

<head>
...
</head>
<body>
    // whole html content here
    <script>
        // js piece here
    </script>
</body>

但如果我使用 jquery 的加载方法，例如：

<head>
    <script>
        $(window).on('load', function () {
            // js piece here

        });
    </script>
</head>
<body>
    // whole html content here
</body>

然后它给出：Uncaught TypeError: window[("chatSocketSender1")] is undefined

请给点建议，为什么这不适用于“onload”？

【问题讨论】：

load 仅表示“在所有脚本下载后运行”。你还是要考虑执行的顺序。
@EmielZuurbier - 所以load 中的 js 代码和 HTML 末尾的 js 代码不完全相同？我以为他们是等价的。没有？
@OtoShavadze 它们是等价的，只有一个在window（全局）级别，另一个在回调范围内。所以你的var xxx 不能被引用为window.xxx，因为它不是一个全局变量。

标签： javascript jquery sockets

【解决方案1】：

您的代码不起作用的原因是因为在您的第一个代码中 var chatSocketSender1 创建了一个“全局”变量（在 window 级别定义），您稍后将其引用为 window("chatSocketSender1")，但在第二个代码中, var chatSocketSender1 的作用域是匿名事件处理函数，因此不能用作 window("chatSocketSender1")。

换一种说法：

<script>
var x = 1;
function foo() {
 console.log(x)
}
</script>

工作正常，但是

<script>
function foo() {
  var x = 1;
}
foo();
console.log(x);
</script>

将给出未定义的变量错误，因为x 仅存在于foo 中。这与您所做的不完全一样，但本质上是相同的概念。

现在，如果您的代码是：

chatSocketSender1.send(

那么它会正常工作，因为您的变量 chatSocketSender1 是在 function() { onload 事件回调中定义的。

或代替

var chatSocketSender1 =

你可以的

window.chatSocketSender1 =

要全局定义变量，或你可以：

<script>
var chatSocketSender1 = new WebSocket(...
function send() { ... }
$(window).on('load', function () {
  document.querySelector('#send_button').onclick = ...

因为您通常只需要 onload 中的事件绑定。

【讨论】：

非常感谢，现在可以使用window.chatSocketSender1 =