javascript - 如何防止使用 jquery 和 socket.io 添加多个事件监听器

Question

我有一个在 $('.message-input') 上设置监听器的函数

function addEasterEgg(room){
  $('.message-input').on('focus', function(event) {
    event.preventDefault();
    console.log('room', room)
    if (room.length === 1) {
      displayStatus("No-one's there!!")
    };
  });
}

它在事件室状态上被调用。

socket.on('roomStatus', function(room){
  addEasterEgg(room);
});

每次有人加入房间时都会触发 roomStatus 事件。因此，如果房间首先有 1 个人，它会被触发并且 room = ["Zf17x3UsNUdgMJ3UAAAD"] 然后当另一个人加入时，它会再次被触发并且 room = ["Zf17x3UsNUdgMJ3UAAAD", "ksxzbQhe0GuZqhMyAAAE"]

所以在 'focus' 事件中，我得到两个 console.logs(每个房间值一个)并且 room.length 始终等于 1，即使它已经变成 2

我相信这是因为我的方法被调用了两次，这意味着添加了 2 个监听器。如果那是正确的，那么在下次调用 roomStatus 和调用 addEasterEgg 时，我应该如何管理删除之前的监听器？

谢谢

Answer 1

我找到了解决方法。看起来它确实在向

添加了多个事件监听器

$('.message-input')

所以在添加修复之前简单地删除所有剩余的事件监听器

$('.message-input').off('focus')

添加到:

function addEasterEgg(room){
  $('.message-input').on('focus', function(event) {
    event.preventDefault();
    console.log('room', room)
    if (room.length === 1) {
      displayStatus("No-one's there!!")
    };
  });
}