Javascript setTimeout and redirect - IE freezes

Question

I have a script on my page that is dealing with session timeouts, redirecting the user on the client side when the session is due to expire. The complete code is somewhat more

Answer 1

I was running into the same type of issue, and I created a different question so I could focus in on what I perceived to be the heart of the issue. (IE not repainting while computer is in lock screen.)

Anyway, I finally figured out a way to resolve this. You can see my answer here. Essentially you can fix your issue by putting some JavaScript inside your auto-logout destination page to periodically update the page content.... and this will force IE to repaint the page.

This way I can execute any Auto Saving logic I want right before their session expires on their current page, and then kick them to the Auto-Logout page.

Answer 2

Sounds as if IE is going into some form of "pause"-mode when you lock the screen, to avoid using cycles on rendering etc. Maybe you can try linking the redirection to the onFocus-event of the window, like this:

window.onfocus = function(){
    window.location.href = "Test2.aspx";
}
window.location.href = "Test2.aspx";

In theory, this should redirect the page as soon as focus is regained (ie when you unlock the screen). If the window already has focus, then this should not make any difference anyway.

Answer 3

I don't have IE here so I can't verify, but maybe you can postpone the call to TimeoutRedirect until after the window is active again.

I've built a sample page to illustrate this.

The principle is rather simple. You while you run the interval and timeout, you;re setting a variable if the window becomes inactive, either because the user switches the tab or locks the screen. Once the timeout is up, you check if the window has focus. If not, set another variable to tell the focus handler to run your session end function. This should help with the redirect.

sessionEnd: function() {
    this.sessionEnded = true;
    var windowEvents;
    if (!this.isInactive) {
        console.log("window active, sessionEnd called");
        alert("THE END");
        this.removeEvents();
        // window.location.href = "test.aspx";
    } else {
        console.log("window inactive, sessionEnd will be called again on focus");
    }

},

handleEvent: function(e) {
    // only do something if the window loses or gains focus
    if (this.eventBlurRegex.test(e.type)) {
        this.isInactive = true;
    } else if (this.eventFocusRegex.test(e.type)) {
        this.isInactive = false;
        if (this.sessionEnded === true) {
            this.sessionEnd.call(this);
        }
    }

},

For older IE versions which don't support the handleEvent function I've used the polyfill found at CSS NInja and modified it a little bit.

I hope this helps.