监听元素存在时间
MutationObserver提供了监视对 DOM 树所做更改的能力
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
现在需要查看message的存在时间是否符合我的配置时长(3秒)
message.config({
top: 300, // 距离顶部300px
duration: 3, // 停留时间3秒
});
先定位到这个元素
const targetElementSelector = "//div[@class='ant-message']//span[text()='查询成功']";
const observerOptions = { childList: true, subtree: true };
监听dom变化
- 当出现该元素时拿到startTime
- 当该元素消失时拿到endTime
- 计算耗时
监听元素变更的函数:observe()
配置 MutationObserver 在 DOM 更改匹配给定选项时，通过其回调函数开始接收通知。
observerOptions表示监听的内容
当childList为 true 时，监听 target 节点中发生的节点的新增与删除（同时，如果 subtree 为 true，会针对整个子树生效）
const observerOptions = { childList: true, subtree: true };
监听代码:
- 元素变化后startObserver开始监听,出现目标元素后执行observer,并结束自己的监听
- 元素再次变化后observer触发,目标消失后执行计算并结束监听
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()
}
})
启动最初的监听任务
startObserver.observe(document.documentElement, observerOptions);
执行后发现时长略大于配置的时间
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2023-12-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
