递归和异步检查html元素是否存在

我正在与一个网页进行交互,即使在文档准备好后,子框架中的一些更深层的嵌套元素也会加载-即它们依赖于待加载的ajax / api请求,这些请求在加载文档时尚未完成。

我的意图是等到这些元素存在后再对它们执行任何操作。我可以使用setTimeout进行此操作并等待任意时间,然后再执行任何操作,例如

setTimeout(function() {
      $("#better_content .binder__toc").append(
        "<h4>Experiments</h4><ul><li>This</li><li>is</li><li>a</li><li>test</li></ul>"
      );
    }, 5000);

但是,最好以递归和异步(非阻塞)的方式不断检查所述元素(“#better_content.binder__toc”),直到未定义或返回null,即该元素存在。我尝试使用Promises做到这一点。一个带有计数器的简单示例如下:

static waitForElement = counter => {

   counter++

    return new Promise((res, rej) => {
      if (counter < 5) {
        this.waitForElement(counter)
          .then(function() {
            res("complete");
          })
          .catch(rej);
      }
      res("complete");
    });
  };

this.waitForElement(counter)
      .then(a => console.log(a))
      .catch(a => console.log(a));

上面的命令成功解决,并且似乎没有阻塞。但是,如果我按如下所示替换元素选择器的计数器:

static waitForElement = selector => {        

    let found = $(document).find(selector)[0];        
    console.log(found);

    return new Promise((res, rej) => {
      if (found === undefined) {
        this.waitForElement(selector)
          .then(function() {
            res("found");
          })
          .catch(rej);
      }
      res("found");
    });
  };


this.waitForElement("#better_content .binder__toc")
      .then(a => {
        console.log(a);
        $("#better_content .binder__toc").append(
          "<h4>Experiments</h4><ul><li>This</li><li>is</li><li>a</li><li>test</li></ul>"
        );
      })
      .catch(a => console.log(a));

然后,这似乎永远无法成功解决,并确实减慢了网页的速度-我认为,因为它仍然阻塞了主线程。

关于如何纠正或理解此处发生的事情的任何建议都将受到欢迎。

评论