Firebase仅追加最新记录至表格问题：重复追加故障排查

这个问题我碰到过好多次啦，咱们先拆解原因，再给你针对性的解决方案：

为什么会出现重复追加？ #

核心原因有两个：

1. 重复绑定事件监听：如果你的这段监听代码是在每次添加数据的操作（比如点击"新增"按钮）里执行的，就会给同一个查询绑定多个child_added回调。每次新记录进来，所有绑定的回调都会触发一次，所以第二次加数据时会追加2次，第三次3次，以此类推。
2. child_added的初始触发特性：首次绑定limitToLast(1)的child_added监听时，它会把当前数据库里的最后一条记录当作"新增"触发一次，这也可能造成误追加，但结合你的描述，更大概率是第一种情况。

解决方案 #

方案1：只绑定一次监听（推荐） #

把监听代码放在页面初始化逻辑里（比如DOMContentLoaded回调中），而不是每次添加数据时重复执行。这样只会绑定一个回调，每次新记录进来只会触发一次：

document.addEventListener('DOMContentLoaded', function() {
  // 仅在页面加载时绑定一次监听
  firebase().database().ref()
    .orderByChild("dateAdded")
    .limitToLast(1)
    .on("child_added", function (snapshot) {
      $('.table').append( "<tr><td>" + snapshot.val().train + "</td><td>" + snapshot.val().destination + "</td><td>" + snapshot.val().frequency + "</td></tr>" );
    });
});

方案2：绑定前移除旧监听 #

如果你确实需要在某个操作中动态绑定，可以先移除之前的监听，避免重复绑定：

// 先移除已存在的child_added监听
const targetRef = firebase().database().ref().orderByChild("dateAdded").limitToLast(1);
targetRef.off("child_added");

// 再绑定新的回调逻辑
targetRef.on("child_added", function (snapshot) {
  $('.table').append( "<tr><td>" + snapshot.val().train + "</td><td>" + snapshot.val().destination + "</td><td>" + snapshot.val().frequency + "</td></tr>" );
});

方案3：跳过初始加载的触发 #

如果初始时数据库已有记录，你不想把这条初始的最后一条追加到表格（只想追加之后新增的记录），可以加个标记区分初始加载和后续新增：

let isInitialLoad = true;

firebase().database().ref()
  .orderByChild("dateAdded")
  .limitToLast(1)
  .on("child_added", function (snapshot) {
    if (isInitialLoad) {
      // 跳过初始加载的那条记录
      isInitialLoad = false;
      return;
    }
    // 仅处理后续新增的记录
    $('.table').append( "<tr><td>" + snapshot.val().train + "</td><td>" + snapshot.val().destination + "</td><td>" + snapshot.val().frequency + "</td></tr>" );
  });

这样就能完美解决重复追加的问题啦～

内容的提问来源于stack exchange，提问作者PaulaMacT