HTML标签DOMNodeInserted事件多次触发，需实现限时内仅执行一次

这确实是DOMNodeInserted这类老Mutation事件的典型坑——当父节点批量插入一堆子元素时，事件会跟着每个子节点的插入触发N次，完全不是你想要的“页面变更一次执行一次”的效果。你想到用定时器的思路完全靠谱，这其实就是**防抖（Debounce）**的核心逻辑，正好能精准解决你的需求。

方法一：防抖定时器（快速适配现有代码） #

防抖的原理很简单：每次触发事件时，先清除之前的定时器，重新设置一个延迟执行的定时器。如果在延迟时间内事件再次触发，就重复“清定时器+重设”的操作，直到最后一次触发后，延迟时间结束才真正执行你的代码。

具体代码示例：

// 声明一个变量存储定时器ID，全局或闭包内都可以
let debounceTimer = null;

document.addEventListener('DOMNodeInserted', () => {
  // 清除之前的定时器，避免重复执行
  if (debounceTimer) clearTimeout(debounceTimer);
  
  // 设置延迟时间（比如300ms，可根据你的页面变更速度调整）
  debounceTimer = setTimeout(() => {
    console.log('change'); // 这里替换成你实际要执行的业务逻辑
  }, 300);
});

你可以根据实际场景调整延迟时间：如果页面是批量快速插入子元素，300ms足够覆盖所有触发；如果变更节奏慢，100-200ms也够用。

方法二：用MutationObserver替代（更优的现代方案） #

其实现在更推荐使用MutationObserver来代替DOMNodeInserted这类老事件——它是W3C标准的现代DOM变化监听API，本身就是异步批量处理DOM变更的，不会像老事件那样逐个触发，性能也更好，还能精确控制要监听的变化类型。

示例代码：

// 配置观察规则：这里我们监听子节点的添加（可根据需求调整）
const observerOptions = {
  childList: true, // 监听子节点的添加/移除
  subtree: true    // 如果需要监听目标节点的所有子树变化，就加上这个
};

// 定义变更回调：只会在DOM批量变更完成后触发一次
const handleDomChange = (mutations) => {
  // 你还可以通过mutations数组判断具体是哪些节点发生了变化，做更精准的处理
  console.log('change');
};

// 创建观察者实例并开始监听
const domObserver = new MutationObserver(handleDomChange);
// 这里监听document.body，你也可以换成你需要观察的特定元素
domObserver.observe(document.body, observerOptions);

如果之后不需要监听了，还可以调用domObserver.disconnect()来停止观察，避免内存泄漏。

两种方案都能实现你要的“特定时间段内仅执行一次”的效果，防抖适合快速适配现有代码的场景，而MutationObserver是更高效、更符合现代前端实践的方案。

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