在您提供的代码中，MutationObserver 监听属性变更，并且在检测到某个特定属性（如 data-example）被修改时，您又手动将其值改回旧值。这会导致递归调用，因为当您使用 setAttribute 恢复旧值时，又会触发 MutationObserver 的回调函数，造成无限循环。
为了解决这个问题，可以采取以下几种方法：
- 禁用观察者：在恢复旧值之前，先停止观察，然后再恢复值，再重新启用观察器。
const observer = new MutationObserver((mutationsList) => {for (let mutation of mutationsList) {if (mutation.type === 'attributes') {console.log(`属性 '${mutation.attributeName}' 已被修改`);console.log('旧值:', mutation.oldValue);if (mutation.attributeName === 'data-example') {const newValue = targetNode.getAttribute('data-example');// 如果新的值不符合预期，可以将其改回旧值（如用 oldValue）if (newValue !== "expected value") {observer.disconnect(); // 停止观察targetNode.setAttribute('data-example', mutation.oldValue);console.log('已恢复为旧值:', mutation.oldValue);observer.observe(targetNode, { attributes: true, attributeOldValue: true }); // 重新开始观察}}}}});// 开始观察目标节点observer.observe(targetNode, { attributes: true, attributeOldValue: true });
- 添加标志位：通过设置一个标志位来避免重复操作。
let isRestoring = false;const observer = new MutationObserver((mutationsList) => {for (let mutation of mutationsList) {if (mutation.type === 'attributes' && !isRestoring) {console.log(`属性 '${mutation.attributeName}' 已被修改`);console.log('旧值:', mutation.oldValue);if (mutation.attributeName === 'data-example') {const newValue = targetNode.getAttribute('data-example');// 如果新的值不符合预期，可以将其改回旧值（如用 oldValue）if (newValue !== "expected value") {isRestoring = true; // 设置标志位targetNode.setAttribute('data-example', mutation.oldValue);console.log('已恢复为旧值:', mutation.oldValue);isRestoring = false; // 重置标志位}}}}});// 开始观察目标节点observer.observe(targetNode, { attributes: true, attributeOldValue: true });
以上两种方法都可以有效地避免递归调用的问题。选择适合您的具体应用场景的方法即可。
内容由零声教学AI助手提供，问题来源于学员提问
