javascript基础学习系列五百二十五：disconnect()方法

默认情况下，只要被观察的元素不被垃圾回收，MutationObserver 的回调就会响应DOM 变化事
件，从而被执行。要提前终止执行回调，可以调用disconnect()方法。下面的例子演示了同步调用
disconnect()之后，不仅会停止此后变化事件的回调，也会抛弃已经加入任务队列要异步执行的回调：
let observer = new MutationObserver(() => console.log(‘ attributes changed’));
observer.observe(document.body, { attributes: true });
document.body.className = ‘foo’;
observer.disconnect();
document.body.className = ‘bar’;
//（没有日志输出）
要想让已经加入任务队列的回调执行，可以使用setTimeout()让已经入列的回调执行完毕再调用
disconnect()：
let observer = new MutationObserver(() => console.log(‘ attributes changed’));
observer.observe(document.body, { attributes: true });
document.body.className = ‘foo’;
setTimeout(() => {
observer.disconnect();
document.body.className = ‘bar’;
}, 0);
// attributes changed
复用MutationObserver
多次调用observe()方法，可以复用一个MutationObserver 对象观察多个不同的目标节点。此
时，MutationRecord 的target 属性可以标识发生变化事件的目标节点。下面的示例演示了这个过程：
let observer = new MutationObserver(
(mutationRecords) => console.log(mutationRecords.map((x) =>
x.target)));
// 向页面主体添加两个子节点
let childA = document.createElement(‘div’),
childB = document.createElement(‘span’);
document.body.appendChild(childA);
document.body.appendChild(childB);
// 观察两个子节点
observer.observe(childA, { attributes: true });
observer.observe(childB, { attributes: true });
// 修改两个子节点的属性
childA.setAttribute(‘foo’, ‘bar’);
childB.setAttribute(‘foo’, ‘bar’);
// [

, ]
disconnect()方法是一个“一刀切”的方案，调用它会停止观察所有目标：
let observer = new MutationObserver(
(mutationRecords) => console.log(mutationRecords.map((x) =>
x.target)));
// 向页面主体添加两个子节点
let childA = document.createElement(‘div’),
childB = document.createElement(‘span’);
document.body.appendChild(childA);
document.body.appendChild(childB);
// 观察两个子节点
observer.observe(childA, { attributes: true });
observer.observe(childB, { attributes: true });
observer.disconnect();
// 修改两个子节点的属性
childA.setAttribute(‘foo’, ‘bar’);
childB.setAttribute(‘foo’, ‘bar’);
// （没有日志输出）