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

• Malachi: is this for a server side session timeout?
• Mathematics: @Malachi yes, we have TMG server for that
• Malachi: I don't think you are hosting a website on TMG, are you? when you say Master page I assume you are talking about ASP (Active Server Pages) that make use of Microsoft's .NET framework. why aren't you handling session timeout?
• Mathematics: @Malachi following what manager says... we are using SharePoint master page, where i am going to add this code, its a quick fix, we may come back to it later on, but atm it serves the purpose :)
• Malachi: again, I ask, why aren't you using the session timeout. you are making a random timeout value that doesn't correlate to anything except for a magic number.

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