如果事件触发后注册了WebSocket事件侦听器，为什么会起作用？

Question

根据MDN docs ，在创建连接后会注册WebSocket事件侦听器，并且该过程是顺序的：

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    console.log('ws connected');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

如果事件在注册侦听器之前开始触发，这如何工作？ 说，在注册open侦听器之前open了连接，或者在注册message侦听器之前收到了message 。

根据并发模型和事件循环的MDN文档 ，由于事件监听器尚未注册，我希望事件会丢失。

在Web浏览器中，只要事件发生并且附加了事件侦听器，便会添加消息。 如果没有侦听器，则事件将丢失。 因此，单击带有click事件处理程序的元素会添加一条消息-与其他任何事件一样。

我尝试在两者之间添加一些昂贵的操作，但似乎open事件message监听器和message事件监听器仅在正确注册所有事件监听器之后才触发。 WebSocket功能本质上是异步的吗？

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// expensive ops
for (var i = 5000; i >= 0; i--) {
  console.log('1');
}

// Connection opened
socket.addEventListener('open', function (event) {
    console.log('ws connected');
});

// expensive ops
for (var i = 5000; i >= 0; i--) {
  console.log('2');
}

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

// prints "1"s, then "2"s, then "ws connected", then "Message from server"

Answer 1

您无法在创建对象之前添加事件，因此必须在事件之后添加。 所有这些都是有效的，因为JavaScript是单线程的，并且事件是在同一线程中处理的，因此在代码运行时什么也不会发生。 您可以将执行延迟一年，并且只有在代码完成后，运行时才会开始处理运行时到达的所有事件。 在您的代码完成之前，套接字甚至可能没有开始连接。

因此，可以确保不会发生任何事件。

Mozilla开发人员网络很好地解释了事件循环 ，“运行完成”讨论了JS运行时的性质。