0

我有一个不寻常的问题。我正在使用以下脚本来检查使用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一部分中使用来避免这种情况，但是它不起作用。

有什么建议么？

4

3 回答 3

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);
于 2012-12-29T19:11:57.833 回答
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

于 2012-12-29T19:17:15.640 回答
1

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

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 而不是间隔，因为它只发生一次。

另一个问题是您创建changeMe但然后尝试使用change. change不存在。我也在我的例子中解决了这个问题。

注意：一旦连接恢复，这将不会恢复刷新。请参阅菲利克斯克林的回答。

于 2012-12-29T19:09:27.707 回答