Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript setTimeout and redirect - IE freezes

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 complex, but I have trimmed down the code to what is causing me the issue:

<head runat="server">
    <script src="javascript/jquery-1.7.2.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">

        /*

            Please see document ready method at the bottom that sets
            up this code, calling CheckActivity() at intervals.

        */

        var warningInterval, redirectTimeout;
        var now = 1;

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

        //In this example this is a bit of a null op, but in real
        //code this will display a warning a minute or so prior to redirect.
        //This is required to recreate...
        function CheckActivity() {
            if (now > 4) {
                clearInterval(warningInterval);

                redirectTimeout = setTimeout(function () { 
                         TimeoutRedirect(); }, 5000);
            }

            //Some visual activity for testing purposes.
            $("#CheckActivityCount").text(now);
            now++;
        }


        $(document).ready(function () {
            warningInterval = setInterval(function () { 
                CheckActivity(); }, 1000);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="CheckActivityCount">

        </div>
    </div>
    </form>
</body>

This code works as expected, redirecting after (roughly) ten seconds. However, if after the interval calls to CheckActivity have finished (after 5 seconds), I lock my screen and then unlock it after the redirect has due to have happened (another 5 seconds), the URL in my IE window has gone to 'test2.aspx', but the window seems to have frozen (still showing the first page).

This eventually un-freezes, but it takes 10s of seconds to get to the next page.

This only seems to happen in IE (IE9 on my machine), and is fine in chrome and firefox (and oddly IE6).

(Test2.aspx is a very simple page, only containing the text 'success'.)


Just noting that if I change the redirect from test.aspx to http://www.google.com/, this does not seem to be a problem. Still does not work however if I change the test2.aspx to be an absolute URL (the only main difference being that this would be a localhost address).

like image 810
Paddy Avatar asked Jul 20 '12 11:07

Paddy


3 Answers

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.

like image 170
ClearCloud8 Avatar answered Oct 20 '22 01:10

ClearCloud8


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.

like image 21
Kjartan Avatar answered Oct 20 '22 01:10

Kjartan


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.

like image 38
Torsten Walter Avatar answered Oct 20 '22 01:10

Torsten Walter