便利贴--8{dom是否渲染完成，用了ref，换成document.getElement是一样的}

最新推荐文章于 2024-02-22 11:10:32 发布

原创最新推荐文章于 2024-02-22 11:10:32 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3

本文介绍了一种监测DOM元素是否渲染完成的方法。通过使用定时器不断检查指定的ref引用是否已存在来判断DOM是否加载完成，并执行相应的回调函数。

便利贴--8{dom是否渲染完成，用了ref，换成document.getElement是一样的}

dom是否渲染完成

dom是否渲染完成

  openMap(val, num, value) {
      this.MapDataShow = true;
      this.openTitle = val;
      this.checkDom("getMapDataRefs", (dom) => {
        dom.init(val, num, value);
      });
    },
    checkDom(name, fn) {
      //  声明定时器
      let that = this;
      var timer = null;
      //  检查dom是否执行完成
      function checkDom() {
        let dom = that.$refs[name];
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
        }
      }
      //  首次执行
      checkDom();
    },