本文详解如何在定时轮询 + AJAX 动态插入 DOM 的场景中，准确识别并跟踪新添加的元素（如 .call-record），避免重复添加，同时提供性能更优的现代替代方案。
本文详解如何在定时轮询 + ajax 动态插入 dom 的场景中，准确识别并跟踪新添加的元素（如 `.call-record`），避免重复添加，同时提供性能更优的现代替代方案。
在基于 jQuery 的轮询式页面更新逻辑中，一个常见陷阱是：DOM 查询（如 $('.call-record')）仅作用于当前已存在的元素，无法自动感知后续通过 AJAX 动态插入的新节点。这导致每次轮询时 currentRecords 数组始终遗漏最新插入的记录，进而触发重复添加——例如
被反复插入多次。
问题根源：静态选择器的局限性
原始代码中：
var currentRecords = [];
$('.call-record').each(function () {
currentRecords.push($(this).prop('id'));
});该语句仅遍历执行时刻已存在于 DOM 中的 .call-record 元素。而 AJAX 成功回调中通过 $('.pending-calls').prepend(newRow) 插入的新元素，在下一轮循环开始前并未被纳入 currentRecords，因此系统始终将其误判为“新记录”。
解决方案一：监听 DOM 变化（兼容旧浏览器）
jQuery 提供了 DOMNodeInserted 事件（虽已废弃但部分旧环境仍可用），可绑定到父容器监听子元素动态插入：
$('.pending-calls').on('DOMNodeInserted', '.call-record', function () {
const id = $(this).prop('id');
if (id && !currentRecords.includes(id)) {
currentRecords.push(id);
}
});⚠️ 注意事项：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- DOMNodeInserted 属于已废弃的 Mutation Events，现代浏览器中已被移除，且存在严重性能隐患（尤其高频插入时）；
- 该事件会为每个新插入节点触发一次，若单次 AJAX 返回多个记录，将多次调用回调，需配合去重逻辑（如 includes() 判断）；
- 必须确保事件绑定在父容器（.pending-calls）上，且使用事件委托语法 '.call-record'，否则无法捕获动态创建的元素。
推荐方案：在 AJAX 回调中显式更新状态（更可靠、更高效）
根本解决思路是放弃依赖被动监听，转为主动维护状态。在成功插入新元素后，立即同步更新 currentRecords：
(function worker() {
let currentRecords = $('.call-record').map((i, el) => el.id).get(); // 更简洁的初始化
$.ajax({
url: '/api/records',
dataType: "json",
type: "POST",
success: function (data) {
// 假设 data 是 { records: [{id: 'id4', content: 'Record 4'}] }
data.records.forEach(record => {
if (!currentRecords.includes(record.id)) {
const newRow = `<div class="call-record" id="${record.id}">${record.content}</div>`;
$('.pending-calls').prepend(newRow);
currentRecords.push(record.id); // ✅ 关键：立即更新状态
}
});
},
complete: function () {
setTimeout(worker, 5000);
}
});
})();✅ 优势：
- 零额外事件监听开销，性能稳定；
- 状态与 DOM 严格同步，逻辑清晰可控；
- 避免竞态条件（如多条记录并发插入时的顺序错乱）；
- 兼容所有现代浏览器及 jQuery 版本。
进阶建议：使用 MutationObserver（现代标准）
若需监听任意 DOM 变化（如第三方脚本插入、框架渲染等），应采用原生 MutationObserver：
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1 && node.classList?.contains('call-record')) {
const id = node.id;
if (id && !currentRecords.includes(id)) {
currentRecords.push(id);
}
}
});
});
});
observer.observe(document.querySelector('.pending-calls'), {
childList: true,
subtree: false
});? 总结：
- 优先在业务逻辑层主动维护状态（如 AJAX 后立即 push ID），而非依赖 DOM 监听；
- 避免使用已废弃的 DOMNodeInserted，改用 MutationObserver 或直接状态同步；
- 定时轮询中，确保 currentRecords 的更新时机与 DOM 更新严格一致，是防止重复渲染的核心。
