如何在MutationObserver监听多个元素样式变化时仅调用一次目标函数

嘿，我明白你遇到的问题了——当两个带last-move类的方块同时改变样式时，你的pieceMoved()会被调用两次，但你只想让它在每次变动周期里执行一次。之前尝试的flag方案要么只能生效一次，要么根本起不到限制作用，对吧？

核心问题在于：同一批次的DOM变动会触发多次观察者回调（每个被监听元素一次），而且你的flag要么在第一次触发后就永久锁定，要么每次回调都被重置。下面给你两种简单有效的解决思路：

方案一：使用防抖（Debounce）函数 #

防抖函数的作用是：在指定时间内，不管触发多少次，只执行最后一次调用。非常适合处理这种同一批次的重复触发场景。

首先，先实现一个通用的防抖函数，再把你的pieceMoved()包装成防抖版本：

// 通用防抖函数：func是要执行的函数，delay是延迟时间（单位ms）
function debounce(func, delay = 100) {
  let timeoutId;
  return function() {
    // 每次触发时清除之前的定时器
    clearTimeout(timeoutId);
    // 重新设置定时器，延迟后执行目标函数
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 把你的pieceMoved包装成防抖版本，这里设置100ms延迟（可根据实际调整）
const debouncedPieceMoved = debounce(pieceMoved);

然后修改你的观察者代码，复用同一个观察者实例（性能更优）：

function observeNewMove() {
  const targetElements = document.querySelectorAll('.last-move');
  
  // 只创建一个观察者实例，监听所有目标元素
  const observer = new MutationObserver((mutationsList) => {
    // 检查当前批次的变动中是否有样式属性变化
    const hasStyleChange = mutationsList.some(mutation => 
      mutation.type === 'attributes' && mutation.attributeName === 'style'
    );
    
    if (hasStyleChange) {
      // 调用防抖后的函数，确保同一批次只执行一次
      debouncedPieceMoved();
    }
  });

  // 给每个目标元素添加监听
  targetElements.forEach(targetElement => {
    observer.observe(targetElement, { attributes: true });
  });
}

方案二：用标记+延迟重置的方式 #

如果你不想用防抖，也可以用一个全局标记，在触发pieceMoved()后短暂锁定标记，之后再重置，确保同一批次不会重复调用：

function observeNewMove() {
  let isTriggered = false; // 标记是否已经触发过函数
  const targetElements = document.querySelectorAll('.last-move');
  
  const observer = new MutationObserver((mutationsList) => {
    const hasStyleChange = mutationsList.some(mutation => 
      mutation.type === 'attributes' && mutation.attributeName === 'style'
    );
    
    // 只有当检测到样式变化，且标记未被触发时，才执行函数
    if (hasStyleChange && !isTriggered) {
      isTriggered = true;
      pieceMoved();
      // 100ms后重置标记，确保下一次变动能正常触发
      setTimeout(() => {
        isTriggered = false;
      }, 100);
    }
  });

  targetElements.forEach(targetElement => {
    observer.observe(targetElement, { attributes: true });
  });
}

为什么这两种方案能解决问题？ #

• 防抖函数通过延迟执行，会把同一批次的多次触发合并成一次，完美适配多个元素同时变动的场景。
• 标记+延迟重置的方式，在第一次触发后临时锁定标记，避免同一批次的其他变动重复调用函数，同时延迟后重置标记，不影响下一次的变动触发。

另外，建议复用同一个MutationObserver实例，而不是给每个元素单独创建，这样能减少内存开销，提升性能。

备注：内容来源于stack exchange，提问作者bobby