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

最新推荐文章于 2024-06-01 02:35:55 发布

Sunny_媛

最新推荐文章于 2024-06-01 02:35:55 发布

阅读量330

点赞数 3

文章标签： javascript 学习开发语言性能优化架构软件工程系统架构

本文链接：https://blog.csdn.net/m0_68635815/article/details/136430008

版权

本文详细解释了JavaScript中的MutationObserver如何跟踪DOM元素的属性和子节点变化，包括MutationRecord的不同属性、命名空间的影响以及如何控制回调的执行。还介绍了disconnect()方法的作用和异步处理回调的方式。

摘要由CSDN通过智能技术生成

下面是一次涉及命名空间的类似变化:

  let observer = new MutationObserver(
        (mutationRecords) => console.log(mutationRecords));
    observer.observe(document.body, { attributes: true });
    document.body.setAttributeNS('baz', 'foo', 'bar');
// [ // {
    //     addedNodes: NodeList [],
    //     attributeName: "foo",
    //     attributeNamespace: "baz",
    //     nextSibling: null,
    //     oldValue: null,
    //     previousSibling: null
    //     removedNodes: NodeList [],
    //     target: body
    //     type: "attributes"
    //   }
    // ]

连续修改会生成多个 MutationRecord 实例，下次回调执行时就会收到包含所有这些实例的数组，顺序为变化事件发生的顺序:

  let observer = new MutationObserver(
       (mutationRecords) => console.log(mutationRecords));
   observer.observe(document.body, { attributes: true });
   document.body.className = 'foo';
   document.body.className = 'bar';
   document.body.className = 'baz';
   // [MutationRecord, MutationRecord, MutationRecord]

下表列出了 MutationRecord 实例的属性。
属性说明
target type oldValue
被修改影响的目标节点字符串，表示变化的类型:“attributes”、“characterData"或"childList”
如果在 MutationObserverInit 对象中启用(attributeOldValue 或 characterData OldValue 为 true)，"attributes"或"characterData"的变化事件会设置这个属性为被替代的值
"childList"类型的变化始终将这个属性设置为 null

let observer = new MutationObserver(() => console.log('<body> attributes changed')); observer.observe(document.body, { attributes: true });
document.body.className = 'foo'; 11 observer.disconnect();
 attributeName
attributeNamespace
addedNodes
removedNodes
previousSibling
nextSibling

对于"attributes"类型的变化，这里保存被修改属性的名字其他变化事件会将这个属性设置为 null 对于使用了命名空间的"attributes"类型的变化，这里保存被修改属性的名字其他变化事件会将这个属性设置为 null 对于"childList"类型的变化，返回包含变化中添加节点的 NodeList 默认为空 NodeList 对于"childList"类型的变化，返回包含变化中删除节点的 NodeList 默认为空 NodeList 对于"childList"类型的变化，返回变化节点的前一个同胞 Node
默认为 null 对于"childList"类型的变化，返回变化节点的后一个同胞 Node 默认为 null

    传给回调函数的第二个参数是观察变化的 MutationObserver 的实例，演示如下:

let observer = new MutationObserver(
(mutationRecords, mutationObserver) => console.log(mutationRecords,
mutationObserver));
observer.observe(document.body, { attributes: true }); document.body.className = 'foo';
// [MutationRecord], MutationObserver

3. disconnect()方法

默认情况下，只要被观察的元素不被垃圾回收，MutationObserver 的回调就会响应 DOM 变化事件，从而被执行。要提前终止执行回调，可以调用 disconnect()方法。下面的例子演示了同步调用 disconnect()之后，不仅会停止此后变化事件的回调，也会抛弃已经加入任务队列要异步执行的回调: 10

let observer = new MutationObserver(() => console.log('<body> attributes changed')); observer.observe(document.body, { attributes: true });
document.body.className = 'bar';
//(没有日志输出)

要想让已经加入任务队列的回调执行，可以使用 setTimeout()让已经入列的回调执行完毕再调用 disconnect():

document.body.className = 'foo';
   setTimeout(() => {
     observer.disconnect();
     document.body.className = 'bar';
   }, 0);
   // <body> attributes changed