监听元素存在时间

MutationObserver提供了监视对 DOM 树所做更改的能力

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

现在需要查看message的存在时间是否符合我的配置时长(3秒)

代码语言：javascript复制

message.config({
  top: 300, // 距离顶部300px
  duration: 3, // 停留时间3秒
});

先定位到这个元素

代码语言：javascript复制

const targetElementSelector = "//div[@class='ant-message']//span[text()='查询成功']";
const observerOptions = { childList: true, subtree: true };

监听dom变化

1. 当出现该元素时拿到startTime
2. 当该元素消失时拿到endTime
3. 计算耗时

监听元素变更的函数:observe()

配置 MutationObserver 在 DOM 更改匹配给定选项时，通过其回调函数开始接收通知。

observerOptions表示监听的内容

当childList为 true 时，监听 target 节点中发生的节点的新增与删除（同时，如果 subtree 为 true，会针对整个子树生效）

代码语言：javascript复制

const observerOptions = { childList: true, subtree: true };

监听代码:

1. 元素变化后startObserver开始监听,出现目标元素后执行observer,并结束自己的监听
2. 元素再次变化后observer触发,目标消失后执行计算并结束监听

代码语言：javascript复制

const targetElementSelector = "//div[@class='ant-message']//span[text()='查询成功']";
const observerOptions = { childList: true, subtree: true };

const observer = new MutationObserver(() => {
  const targetElement = document.evaluate(targetElementSelector, document).iterateNext()
  if (!targetElement) {
    // 元素消失后,记录结束时间
    const endTime = performance.now()
    // 计算并打印耗时
    const duration = endTime - startTime
    console.log(`元素存在${duration}毫秒`)
    // 结束当前监听任务
    observer.disconnect()
  }
})

const startObserver = new MutationObserver(() => {
  const targetElement = document.evaluate(targetElementSelector, document).iterateNext()
  if (targetElement) {
    // 元素出现后,记录开始时间
    startTime = performance.now()
    // 开始新的监听任务
    observer.observe(document.documentElement, observerOptions)
    // 结束当前监听任务
    startObserver.disconnect()
  }
})

启动最初的监听任务

代码语言：javascript复制

startObserver.observe(document.documentElement, observerOptions);

执行后发现时长略大于配置的时间

document duration message 函数 配置

0 人点赞