本文介绍在使用 MutationObserver 监听多个元素的样式变更时，如何避免 pieceMoved() 被重复调用，通过在单次回调内聚合判断逻辑，实现「只要任一目标元素发生 style 变更，就只执行一次处理函数」的目标。
本文介绍在使用 mutationobserver 监听多个元素的样式变更时，如何避免 `piecemoved()` 被重复调用，通过在单次回调内聚合判断逻辑，实现「只要任一目标元素发生 style 变更，就只执行一次处理函数」的目标。
在基于 MutationObserver 的 DOM 变更监听场景中，一个常见误区是：为每个目标元素单独创建 observer 实例，并在各自回调中直接触发业务函数（如 pieceMoved()）。当多个 .last-move 元素几乎同时更新 style 属性时（例如棋盘类应用中两个棋子同步动画），每个 observer 都会独立触发回调，导致 pieceMoved() 被多次执行——这不仅违背业务语义（“一次移动”应对应一次响应），还可能引发状态不一致或重复计算问题。
正确的解决思路不是依赖跨回调的共享标志（如全局 flag），而是将“是否需触发”的判定逻辑收束到单次 observer 回调内部：遍历当前批次的所有 mutations，只要发现任意一条符合 type === 'attributes' && attributeName === 'style' 的记录，就标记为“需执行”，并在循环结束后统一调用一次 pieceMoved()。
以下是优化后的完整实现：
function observeNewMove() {
const targetElements = document.querySelectorAll('.last-move');
targetElements.forEach((targetElement) => {
const observer = new MutationObserver((mutationsList, observer) => {
let shouldInvoke = false;
for (const mutation of mutationsList) {
if (mutation.type === 'attributes' &&
mutation.attributeName === 'style') {
shouldInvoke = true;
// 注意：此处不 break，以确保完整遍历（虽非必须，但更健壮）
}
}
if (shouldInvoke) {
pieceMoved(); // ✅ 确保每轮 observer 回调最多执行一次
}
});
observer.observe(targetElement, { attributes: true, attributeFilter: ['style'] });
});
}
? 关键改进点说明：
- shouldInvoke 声明在回调函数作用域内，每次 observer 触发时都会重置，天然避免跨批次干扰；
- 使用 attributeFilter: ['style'] 显式限定监听范围，减少无关 mutation，提升性能与可读性；
- 判定逻辑（shouldInvoke = true）与执行逻辑（pieceMoved()）严格分离，符合单一职责原则。
⚠️ 注意事项：
- 此方案保证的是「单次 observer 回调内最多执行一次」，而非「全局仅执行一次」。若需全局去重（如防止连续快速移动触发多次），应在 pieceMoved() 内部添加节流（throttle）或防抖（debounce）逻辑；
- 若 .last-move 元素动态增删，需配合 observe()/disconnect() 手动管理 observer 生命周期，或改用 document 级观察 + mutation.target.classList.contains('last-move') 过滤，以支持动态节点。
综上，核心思想是：把“聚合判断”留在回调内，而非试图用外部状态协调多个并发回调——这既简洁可靠，又完全符合 MutationObserver 的事件批处理设计本意。
