0

I have an unusual problem. I'm using the following script to check for internet connection using navigator.onLine. If there is internet connection, the page will be refreshed every 15 seconds. If there isn't any internet connection, the page will use innerHTML to display a message.

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

My problem is, once there is no internet connection, the message will be displayed, BUT the page would still be refreshed one last time. I'm trying to avoid this, by using clearInterval(myInterval); in the else part of the code, however it won't work.

Any suggestions?

Homie
  • 437
  • 4
  • 11
  • 23

3 Answers3

2

Whenever the outer interval callback is executed, a new myInterval variable is created and the previous one is lost (it goes out of scope because the callback terminates).

You have to persist the value of the variable between function calls by declaring it outside of the function. You also have to make sure that you are not creating another timeout if one is already running.

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);
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
2

To refresh the page at 15 second intervals (provided that a connection is present), use:

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);

At the end of 15 seconds, this checks whether a connection is present. If there is, it refreshes the page. If there isn't, it proceeds to check every 250 milliseconds afterwards until the user is reconnected, at which point it refreshes the page.

The net result is that the script refreshes the page as soon as possible after a minimum of 15 seconds have elapsed.

Here is a demonstration: http://jsfiddle.net/JGEt9/show

Asad Saeeduddin
  • 46,193
  • 6
  • 90
  • 139
  • But the OP want's to continuously test whether there is a connection or not. If there is no connection, a message should be shown. Once there is a connection again, the "reload timeout" should start again/continue. Your's just waits for 15 seconds and if the there is no connection, it just stops. – Felix Kling Dec 29 '12 at 19:18
  • @FelixKling This refreshes the page after 15 seconds if a connection is present. If no connection is present, the page is not refreshed. – Asad Saeeduddin Dec 29 '12 at 19:19
  • Yes... but what if there is a connection again? Or is your answer in addition to the OP's other code? – Felix Kling Dec 29 '12 at 19:20
  • @FelixKling Right, but the clearInterval is supposed to "just stop" as well, if there is no connection present. No further action is supposed to take place except the DOM manipulation. – Asad Saeeduddin Dec 29 '12 at 19:20
  • The `clearInterval` was supposed to stop the reloading, not the connection testing. Once a connection exist again, the reload should continue. – Felix Kling Dec 29 '12 at 19:23
  • @FelixKling I've updated my answer. I think this makes more sense than what the OP was doing, because essentially right now the OP is looking for an unbroken spell of connected statuses. If the connection is interrupted for only 250 ms every 15 seconds, the page will never refresh. – Asad Saeeduddin Dec 29 '12 at 19:35
  • I found an issue with this solution. setTimeout(refresh, 250) is being ignored. It's never being used. – Homie Dec 29 '12 at 23:07
  • @EliUnger Select Work Offline from the your browser menu. After 15 seconds, the `OFFLINE` message should show up. At this point the 250 ms timeout kicks in. It checks every 250 ms if the connection has been restored, and if it has, it refreshes the page. – Asad Saeeduddin Dec 29 '12 at 23:16
  • @EliUnger Are you seeing behavior that is inconsistent with this? – Asad Saeeduddin Dec 29 '12 at 23:24
1

You need to declare myInterval outside of the if statement. You should only need the refresh code once too. Something like this:

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);

Here you set the refresh interval and continually check to see if the browser is offline, and if it is, you remove the timer and do your cleanup code. I also changed the refresh code to use setTimeout instead of interval because it only happens once.

Another issue is you create changeMe but then try to use change. change doesn't exist. I fixed that in my example as well.

Note: This will not resume refreshing once connection is regained. See Felix Kling's answer.

sachleen
  • 30,730
  • 8
  • 78
  • 73