如何在调用函数后停止 setInterval

Question

所以，我有一个条件来检查我是否在当前的 URL 上。 如果它是真的setInterval()开始检查页面上的元素之一。
如果找到元素 - 函数被调用。 如果没有，它会在一段时间后清除间隔：

if(document.location.href.includes('part-of-url')){
  var i = 0;
  var interval = setInterval(()=>{
      if(document.querySelector('.selector')){
        someFunction();
      }
      else{
        i++;
      }
      if(i >= 20){
        clearInterval(interval);
      }
    }, 100)
}

如果找不到元素，我会清除间隔，但根据我对setInterval()理解，在调用该函数后不会清除该间隔并将继续运行。 函数被调用后清除它的最佳位置在哪里？
这段代码的全部目的是在元素加载后运行一个函数。 我试图在函数调用后清除它，但someFunction()从未调用someFunction()代码。

Answer 1

如果您希望在找到元素后清除间隔，只需在someFunction()之前/之后调用clearInterval(interval) someFunction() 。

话虽如此，最好递归使用setTimeout ，因为它不会像setInterval那样容易地淹没您的事件循环。
作为奖励，您可以使用递归结构在递归函数的范围内包含迭代计数器：

 function checkIfElementExists(i) { if (document.querySelector('.selector')) { someFunction(); } else if (i > 0) { setTimeout(() => checkIfElementExists(i - 1), 100); } } if (document.location.href.includes('part-of-url')) { checkIfElementExists(20); }