Getting onBeforeUnload to work with a setTimeout

Question

I am trying to get onbeforeunload to work with a set timer of sorts but I can't seem to get it to fire up when the return is in place. I am hoping it would work with a timer but for some reason the timer isn't working. Here is the code I am working and thank you for your help in looking at it much appreciated.

var validNavigation = false;

function wireUpEvents() {
    var leave_message = 'Leaving the page';

    jQuery(
        function goodbye() {
            jQuery(window).bind('onbeforeunload', function() {
                setTimeout(function() {
                    setTimeout(function() {
                        jQuery(document.body).css('background-color', 'red');
                    }, 10000);
                },1);

            return leave_message;
        });
    }); 

    function leave() {
        if(!validNavigation) {
            killSession();
        }
    }

    //set event handlers for the onbeforeunload and onunloan events
    window.onbeforeunload = goodbye;

    window.onunload=leave;
}

// Wire up the events as soon as the DOM tree is ready
jQuery(document).ready(function () {
    wireUpEvents();
});

Please format you code properly when posting a question, it makes much easier to understand what it is saying. It will also help your self, any decent code editor will have an `indent` or `format` functionality that will do the work for you. For SO use spaces instead of tabs, and prepend 4 spaces to each line to make the code block display as code. — Matti Lyra, Sep 24 '12 at 19:52
Sorry its always complicated to me posting code, Don't think i will ever really quiet get it. — Gilbert V, Sep 24 '12 at 19:54

score 7 · Accepted Answer · answered Jan 24 '13 at 17:57

7

onBeforeUnload doesn't work with setTimeout. After onBeforeUnload executes, onUnload will be triggered and the page will change. This happens before the setTimeout callback is called.

answered Jan 24 '13 at 17:57

John Kurlak

6,594
7
43
59

Thanks @John for the answer. Do you know any way if I need to execute a method after particular time period when onbeforeunload gets triggered? – Adarsh Kumar Jan 28 '15 at 11:59
1

@AdarshKumar The only way to prevent the page from exiting after the user attempts to leave is by putting synchronous code in the onbeforeunload/onunload handler. You technically could put a loop that executes until a certain amount of time has passed, but that will be inefficient and block the UI. – John Kurlak Jan 28 '15 at 21:52
Of if there're any Synchronous Ajax calls – Nayeem May 16 '18 at 13:24
1

@Nayeem: Synchronous Ajax calls fall under the blanket of "synchronous code" that I mention above. – John Kurlak May 16 '18 at 18:49

score 3 · Answer 2 · answered Dec 15 '20 at 23:12

@Jonh Kurlak is right, onbeforeunload doenst work with timeout to protect the browser user from being scammed.

But there is something you can do!!!

for(var i = 0; i < 1000; i++){
    console.log(i);
}

You can make this for loop printing to console to delay the unload of the page, the higher the number of iterations it as to loop through the longer it waits.

Getting onBeforeUnload to work with a setTimeout

2 Answers2

Linked