Javascript 为什么clearInterval（）只能工作一次？

基本思想是确定页面是否有视频，等待视频结束，然后以30秒的间隔继续滑动不包含视频的页面。它清除间隔并等待，直到它只完成一次。第二次，它就像其他页面一样不断滑动

函数getPage（一）{
返回p[i]；
}
var pages='@ViewBag.pages'；
var p=JSON.parse（pages.replace（/（“\”）/g，“\”）；
var i=0；
var mi=p.长度-1；
var区间；
var frame=document.getElementById（“滑块”）；
var frameDoc=frame.contentDocument | | frame.contentWindow.document；
frame.onload=函数（）{
if（$（document.find（“iframe”）.contents（）.find（“video”）.length==1）{
间隔时间；
日志（“间隔已成功清除”）；
log（“视频正在播放！”）；
var video=document.getElementById（'slider'）.contentWindow.document.getElementById（'video'）；
video.onended=函数（）{
log（“视频已完成！”）；
i++；
如果（i>mi）{
i=0
}
frame.src=getPage（i）；
}
}否则{
console.log（“未找到视频”）；
间隔=设置间隔（函数（）{
i++；
如果（i>mi）{
i=0
}
$.ajax({
async:false，
url:getPage（i），
键入：“GET”，
成功：函数（）{
frame.src=getPage（i）；
}
});
}, 10000);
}
}

这里的问题是当页面没有视频时，

clearInterval

不会被调用

让我们以下面的场景为例，按此顺序有2页没有视频，1页有视频

加载第一页，启动setInterval并将引用存储在变量

interval

中

加载10000ms下一页后，由于该页没有视频，上一个设置间隔不会被清除，并且

interval

会用新的设置间隔进行更新。现在有两个设置间隔正在运行，比如

interval1

和

interval2

10000ms后，这一次执行2个设置间隔，

interval1

将页面移动到第3页，

interval2

将页面移动到第1页

您一直在创建新的设置间隔，直到您转到包含视频的页面，并且当您到达包含视频的页面时，您只清除了最后一个间隔。这仍然会保留所有其他间隔，这些间隔会不断更新您的页面

解决：

在iframe.onload内无条件运行clearInterval

使用setTimeout，因为您希望它只执行一次

PS:我更喜欢第二个

var interval;
frame.onload = function() {
  interval && clearInterval(interval);
  if ($(document).find("iframe").contents().find("video").length == 1) {
  } else {
    interval = setInterval(function() {}, 10000);
  }
}

frame.onload = function() {
  if ($(document).find("iframe").contents().find("video").length == 1) {
  } else {
    setTimeout(function() {}, 10000);
  }
}