JavaScript：clearInterval不会清除间隔

Question

我有一个不寻常的问题。 我正在使用以下脚本使用navigator.onLine检查互联网连接。 如果有互联网连接，该页面将每15秒刷新一次。 如果没有任何互联网连接，则该页面将使用innerHTML显示消息。

<script type="text/javascript">
setInterval(function () {
if (navigator.onLine) {
var myInterval = setInterval(function(){window.location.href = "Tracker.html";},15000);
} else {
clearInterval(myInterval);
var changeMe = document.getElementById("change");
change.innerHTML = "<big><font face='Arial' color='#ffffff' size='2'><center>OFFLINE</big><br>No internet connection</font></center>";
}
}, 250);
</script>

我的问题是，一旦没有互联网连接，就会显示该消息，但是该页面仍会最后一次刷新。 我试图通过使用clearInterval(myInterval);来避免这种情况 在代码的else部分，但是它将不起作用。

有什么建议么？

Answer 1

每当执行外部间隔回调时，都会创建一个新的myInterval变量，并且前一个变量会丢失（由于回调终止，它超出了范围）。

您必须通过在函数外部声明变量来在函数调用之间保留变量的值。 如果已经在运行，则还必须确保不创建另一个超时。

var timeout = null;

setInterval(function () {
    if (navigator.onLine) {
        if (timeout === null) {
            timeout = setInterval(function(){window.location.href = "Tracker.html";},15000);
        }
    } else {
        clearTimeout(timeout);
        timeout = null;
        // ...
   }
}, 250);

Answer 2

要每隔15秒刷新一次页面（假设存在连接），请使用：

function refresh() {
    if(navigator.onLine)
        window.location.href = "Tracker.html";
    else{
        var changeMe = document.getElementById("change");
        change.innerHTML = "<big><font face='Arial' color='#ffffff' size='2'><center>OFFLINE</big><br>No internet connection</font></center>";
        setTimeout(refresh, 250);
    }
}
setTimeout(refresh, 15000);

在15秒结束时，这将检查是否存在连接。 如果存在，它将刷新页面。 如果没有，它将随后每隔250毫秒检查一次，直到重新连接用户为止，此时刷新页面。

最终结果是，脚本至少要经过15秒后才能刷新页面。

这是一个演示： http : //jsfiddle.net/JGEt9/show

Answer 3

您需要在if语句之外声明myInterval 。 您也只需一次刷新代码。 像这样：

var myInterval = setTimeout(function(){window.location.href = "Tracker.html";},15000);
setInterval(function () {
  if (!navigator.onLine) {
    clearTimeout(myInterval);
    var changeMe = document.getElementById("change");
    changeMe.innerHTML = "<big><font face='Arial' color='#ffffff' size='2'><center>OFFLINE</big><br>No internet connection</font></center>";
  }
}, 250);

在这里，您可以设置刷新间隔，并不断检查浏览器是否处于脱机状态；如果是，则删除计时器并执行清理代码。 我也将刷新代码更改为使用setTimeout而不是interval，因为它只发生一次。

另一个问题是您创建changeMe ，然后尝试使用change 。 change不存在。 我也在示例中修复了该问题。

注意：一旦恢复连接，此操作将不会恢复刷新。 请参阅Felix Kling的答案。