js 中如何检测元素是否存在 - setInterval 方式

最新推荐文章于 2023-04-13 15:51:30 发布

艾斯比的日常

最新推荐文章于 2023-04-13 15:51:30 发布

阅读量1.3k

点赞数

分类专栏： front

本文链接：https://blog.csdn.net/u012745499/article/details/117431356

版权

front 专栏收录该内容

86 篇文章 1 订阅

订阅专栏

js 中使用 setInterval 方式暴力检测元素是否存在

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div class="container">
  <button class="insertDom">插入元素</button>

</div>

<script>
  // 闭包调用, 避免污染 window 对象
  (function () {

    // 绑定点击事件
    document.querySelector('.insertDom').addEventListener('click', function () {
      let p = document.createElement('p');
      p.textContent = Date.now() + ''
      let span = document.createElement('span');
      span.textContent = 'span'
      span.className = 'abc'
      document.querySelector('.container').appendChild(p)
      p.appendChild(span)
    });

    /**
     * 使用 setInterval 暴力检测页面元素是否存在, 并执行回调函数
     * @param selector 元素选择器
     * @param callback 回调函数
     */
    function observe(selector, callback) {
      let startTime = Date.now()
      // 检测超时, 最长 30s
      let MAX_OBSERVE_TIME = 30e3;

      let found = false

      // 每隔 100ms 检测一次页面元素是否存在
      let intervalId = setInterval(function () {
        // 务必注意 return, 即 结束方法
        if (found) {
          clearInterval(intervalId)
          return;
        }
        let elapse = Date.now() - startTime;
        if (elapse > MAX_OBSERVE_TIME) {
          console.log(`${selector} 元素检测超时 ${elapse} ms, 停止检测`)
          clearInterval(intervalId)
          return;
        }

        let element = document.querySelector(selector);
        // 如果没值, 则 return
        if (!element) {
          console.log(`${selector} 元素不存在`)
          return
        }
        found = true
        // 向回调函数中传入 this
        callback(element)

      }, 100);
    }

    // 支持检测多个元素
    // 调用检测方法
    observe('p', function (element) {
      console.log(element)
    });
    observe('.abc', function (element) {
      console.log(element)
    });


  })()
</script>

</body>
</html>

setInterval 暴力检测元素

setInterval 这种方式比较暴力, 更好的方式是通过监听元素的插入事件, 才触发检测逻辑, 而不是死板的定时查询. 这将在下节会介绍

艾斯比的日常

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 中如何检测元素是否存在 - setInterval 方式

js 中使用 setInterval 方式暴力检测元素是否存在<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div class="container"> <button class="insertDom">插入元素<
复制链接

扫一扫