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>

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

有什么建议吗？

Answer 1

要以 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