首页 文章

JavaScript：clearInterval不会清除间隔

提问于
浏览 次
0

我有一个不寻常的问题 . 我正在使用以下脚本来检查使用 navigator.onLine 的Internet连接 . 如果有互联网连接，页面将每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>

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

有什么建议？

javascript setinterval intervals clearinterval

3 回答

  • 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

    回复于
  • 2

    每当执行外部间隔回调时，都会创建一个新的 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);
    回复于
  • 1

    您需要在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 不存在 . 我也在我的例子中解决了这个问题 .

    Note: 重新获得连接后，将不会恢复刷新 . 见Felix Kling的回答 .

    回复于

相关问题