Question

addeventlistener 多次构建

2019-11-21

73

javascript firebase-realtime-database addeventlistener

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

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

.onSnapshot 是对我数据库的实时监听，换句话说，如果我的文档 yy 的数据库有更改，accept_button 就会出现，然后 initializeChat 函数就会被构建到 accept_button 中。

当文档更改 x 次时， addEventListener 函数就会构建 x 次，并且 initializeChat 会执行 x 次。我该如何让相同的 addEventListener 函数相互覆盖，并且 initializeChat 只执行一次？

感谢您的时间和帮助。

Answer 1

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

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

Answer 2

听起来你只需要检查一个标志来查看是否已经将监听器添加到按钮上：

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

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

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

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