javascript - 有没有办法每隔几秒检查 chrome 扩展中 content.js 中的 DOM 元素？

Question

我正在 chrome 扩展中的 content.js 中操作 DOM。该网页将在不确定的时间后进行更改。我想写一些代码来监控变化。这意味着我想在发现 DOM 发生变化后做一些事情。有没有办法在 content.js 中每隔几秒或几秒检查一次 DOM？我以前没有这样做过。感谢您的任何建议。

Answer 1

另一种不像 MutationObserver 那样优雅的方法是使用 setInterval 定期执行代码:

setInterval(()=> {
 let d = document.querySelector('#el')
 if(d){
  console.log('dom manipulation')
 }
},100)

每 100 毫秒执行一次该函数。

要停止间隔，您必须将 setInterval 的返回值保存到变量中。您将此值传递给全局函数clearInterval以停止间隔:

let interval = null

let domWorks = () => {
     let d = document.querySelector('#el')
     if(d){
      console.log('dom manipulation')
      clearInterval(interval) // Change it via reference
     }
}

interval = setInterval(domWorks, 100)

您可以创建一个封装间隔的函数，并在某些条件成立时执行一些回调:

  const executeWhenItsReady = (testCondition, callbackToExecute) => {
      let interval = null;
      let tryToExecute = () => {
        let result = testCondition();
        console.log("trying again");
        if (result) {
          callbackToExecute();
          clearInterval(interval); // Change it via reference
        }
      };

      interval = setInterval(tryToExecute, 100);
    };

  executeWhenItsReady(
         () => document.querySelector("el"), 
         () => console.log("dom manipulation")
  );