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")
  );

有什么方法可以在Chrome扩展程序的content.js中每隔几秒钟检查一次DOM元素？

1 个答案: