Window timeout alert

Question

How can I improve this window timeout alert code? I need to add it to some third-party master page and don't want to add a separate file for it.

It must be JS only and IE-8 supported.

jsFiddle

(function () {
//    timedRefresh(10); //3600000
    delayedAlert();

    var timeoutID;

    function delayedAlert() {
        clearAlert();
      timeoutID = window.setTimeout(slowAlert, 10000);
    }

    function slowAlert() {
      alert("You may have been logged out due to inactivity. Click OK to refresh the page.");
    }

    function clearAlert() {
      window.clearTimeout(timeoutID);
    }
})();

Answer 1

A few points to make about this:

(function () {
//    timedRefresh(10); //3600000
    delayedAlert();

    var timeoutID;

    function delayedAlert() {
        clearAlert();
      timeoutID = window.setTimeout(slowAlert, 10000);
    }

    function slowAlert() {
      alert("You may have been logged out due to inactivity. Click OK to refresh the page.");
    }

    function clearAlert() {
      window.clearTimeout(timeoutID);
    }
})();

• slowAlert/delayedAlert can be improved by moving slowAlert into delayedAlert as follows:

function delayedAlert() {
    clearAlert();
    timeoutID = window.setTimeout(function(){
        alert("You may have been logged out due to inactivity. Click OK to refresh the page.");
    }, 10000);
}  

• I can't see why the clearTimeout call deserves its own function, when it only gets called from delayedAlert; You could just put it in delayedAlert:

function delayedAlert() {
    window.clearTimeout(timeoutID);
    timeoutID = window.setTimeout(function(){
        alert("You may have been logged out due to inactivity. Click OK to refresh the page.");
    }, 10000);
}

• You can make delayedAlert an anonymous function, so that it cannot be called other than inside that block by changing function delayedAlert() into var delayedAlert = function()

• You call delayedAlert before timeoutID is defined:

delayedAlert();

var timeoutID;

If you're going to use globals (which are recommended against), declare them first, at the top.

(function(){
    var timeoutID;
    // functions and whatnot
    delayedAlert();

---

All resulting in:

(function(){
    var timeoutID;
    var delayedAlert = function() {
        window.clearTimeout(timeoutID);
        timeoutID = window.setTimeout(function(){
            alert("You may have been logged out due to inactivity. Click OK to refresh the page.");
        }, 10000);
    }
    delayedAlert();
})();

Answer 2

I know that you are writing this for an ASPX page, so I am suggesting that you use the Server's session timeout instead of using a magic number for the timeout.

in this function:

function delayedAlert() {
    clearAlert();
  timeoutID = window.setTimeout(slowAlert, 10000);
}

you could write it like this

function delayedAlert() {
    var sessionTimeout = "<%= Session.Timeout %>";
    clearAlert();
    timeoutID = window.setTimeout(slowAlert, sessionTimeout);
}

this way you won't timeout too early or timeout too late, you will always timeout almost exactly as the session times out.

---

Extra Information was gathered from a discussion posted in a chat room along with the comments to the OP