如何防止使用 jquery 和 socket.io 添加多个事件侦听器答案

【问题标题】：How to prevent multiple event listeners being added with jquery and socket.io如何防止使用 jquery 和 socket.io 添加多个事件侦听器
【发布时间】：2015-01-18 21:06:09
【问题描述】：

我有一个在 $('.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!!")
    };
  });
}

在事件 roomStatus 上调用它。

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

每次有人加入房间时都会触发 roomStatus 事件。所以如果房间先有 1 人，就会触发 room = ["Zf17x3UsNUdgMJ3UAAAD"] 然后当另一个人加入时，再次触发 room = ["Zf17x3UsNUdgMJ3UAAAD", "ksxzbQhe0GuZqhMyAAAE"]

所以在“焦点”事件中，我得到了两个 console.logs（每个房间值一个），并且 room.length 始终等于 1，即使它后来变成了 2

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

谢谢

【问题讨论】：

您的“on”函数是否被“while”或“for”循环包裹？
只需在回调之外委托侦听器一次。由于它没有出现回调正在执行任何 DOM 插入，您甚至可能不需要委托

标签： javascript jquery socket.io

【解决方案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!!")
    };
  });
}

【讨论】：