addeventlistener 构建了多次

Question

如果我的数据库中有实时更改，我会构建一个 addEventListener：

                    db.collection(xx).doc(yy).onSnapshot(user => {
                        accept_button.addEventListener("click", function() {
                          initializeChat();
                        })

.onSnapshot是我的数据库的实时监听器，换句话说，如果我的文档 yy 的数据库发生变化，就会出现 accept_button，然后将initializeChat function 内置到 accept_button 中。

当文档更改 x 次时， addEventListener function 被构建 x 次， initializeChat被执行 x 次。 如何使相同的 addEventListener function 相互覆盖，并且initializeChat只执行一次？

感谢您的时间和帮助。

Answer 1

听起来您只需要检查一个标志即可查看是否已将侦听器添加到按钮中：

let listenerAdded = false;
db.collection(xx).doc(yy).onSnapshot(user => {
  if (listenerAdded) {
    return;
  }
  listenerAdded = true;
  accept_button.addEventListener("click", initializeChat);
})

请注意， click回调不需要额外的匿名 function。

这通常不是一个好主意（因为一次只能分配一个onclick监听器），但如果您确定不会将其他点击监听器添加到按钮，您也可以分配给onclick并检查它：

db.collection(xx).doc(yy).onSnapshot(user => {
  if (accept_button.onclick) {
    return;
  }
  accept_button.onclick = initializeChat;
})

Answer 2

使用onclick代替addEventListener 。 这将删除多个事件处理。

db.collection(xx).doc(yy).onSnapshot(user => {
  accept_button.onclick = function() {
    initializeChat();
  }
})