clearInterval 在 javascript chrome 扩展中不起作用答案

【问题标题】：clearInterval not working in javascript chrome extensionclearInterval 在 javascript chrome 扩展中不起作用
【发布时间】：2017-12-20 17:03:36
【问题描述】：

我正在尝试制作一个 chrome 扩展，并且在我的 content script 中，它只在 www.youtube.com 上运行，它应该检查 document.getElementById("movie_player")，是否已加载特定的 div 元素。如果不是setInterval，请稍等。如果已加载，则运行 alert("Hello") 和 clearInterval 这将结束脚本。

但是，它不起作用。即使在我找到该元素后，它会说“Hello”，它会继续说 hello，这意味着 setInterval 在 1000 毫秒后仍在调用我的函数，即使它应该已被清除。

这是我的content.js 文件：

var timeOut;

function CheckDOMChange()
{   
    moviePlayer = document.getElementById("movie_player");

    if(moviePlayer !== null)
        {
            WhenVideoLoads();
        }

    timeOut = setInterval("CheckDOMChange();", 1000);
}
function WhenVideoLoads()
{
    alert("Hello");

    clearInterval(timeOut);
}
CheckDOMChange();

如您所见，我将timeOut 设为全局变量，因此它不应该是范围问题。所以我真的不知道问题出在哪里，因为正在满足条件并且正在调用clearInterval。

任何帮助将不胜感激。

【问题讨论】：

@FastSnail 这不是问题。无论哪种方式，您都可以调用该函数。即使更改了我的代码，我仍然得到相同的输出。
除了答案之外，您还应该避免在 setInterval 或 setTimeout 中使用带引号的函数。你应该使用CheckDOMChange 而不是"CheckDOMChange();"。引用的变体是“eval”的一种形式，可能会在压缩器和其他代码检查器中破坏您的代码。

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

问题是你在函数中有setInterval。基本上，对于每个呼叫，您都在设置间隔，这会创建多个 setInterval。从函数中删除 setInterval

var timeOut;

function CheckDOMChange() {
  moviePlayer = document.getElementById("movie_player");

  if (moviePlayer !== null) {
    WhenVideoLoads();
  }


}

function WhenVideoLoads() {
  alert("Hello");

  clearInterval(timeOut);
}
timeOut = setInterval("CheckDOMChange();", 1000);

【讨论】：

你是对的。我怀疑这可能是问题，但不确定。再次感谢！
很高兴能帮上忙 :)

【解决方案2】：

通过递归调用CheckDOMChange，你实际上是在以指数方式创建定时器，而你只是在调用WhenVideoLoads时清空最后一个定时器。

您可以尝试运行此 sn-p 并检查控制台以查看发生了什么，并看到单击按钮将清除最后一个计时器，但不会清除之前创建的所有计时器。

var timeOut;
var counter = 0;

function CheckDOMChange()
{   
	console.log("counter :", counter);
  if (counter > 16) {
    console.log("Stop creating new timers!");
    return;
   }

  timeOut = setInterval("CheckDOMChange();", 5000);
	console.log("timeOut :", timeOut);
	counter ++;
}
function WhenVideoLoads()
{
  console.log("Clearing ", timeOut);
  clearInterval(timeOut);
}
CheckDOMChange();

&lt;button onclick="WhenVideoLoads()" id="clear"&gt;Clear timer&lt;/button&gt;

您应该避免递归调用CheckDOMChange，并按照@cdoshi 的建议进行操作。

希望这会有所帮助！

【讨论】：