Question

我正在尝试制作Chrome扩展程序，而editable仅在content script上运行，它应该检查www.youtube.com，如果某个特定document.getElementById("movie_player")元素有是否加载。如果不是div并等待一秒钟。如果已加载，则运行setInterval和alert("Hello")，这将结束脚本。

然而，它不起作用。即使在我找到该元素之后，它也会显示“Hello”，它会继续问好，这意味着clearInterval在1000毫秒后仍在调用我的函数，即使它应该被清除。

这是我的setInterval文件：

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。

非常感谢任何帮助。

Answer 1

问题是你在函数中有setInterval。基本上，对于每个调用，您都要设置间隔，这会创建多个setIntervals。从函数

中删除setInterval

var timeOut;

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

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


}

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

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

Answer 2

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

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

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

<button onclick="WhenVideoLoads()" id="clear">Clear timer</button>

你应该避免递归地调用CheckDOMChange，并按照@cdoshi建议继续。

希望这有帮助！

clearInterval无法在javascript chrome扩展中使用

2 个答案: