Question

I would like to have an animation effect which starts when people leave a page.

I use this currently:

window.onbeforeunload = function (){
    alert("test");
    console.log("test");
    sliderIntervalId = setInterval('SlideDown()',1);
}

While the "test" is indeed logged to the console, the neither the function slideDown nor the test alert is produced…

Is this normal behavior? Can we use the beforeunload function only for backend purposes?

P.S. I’m testing on Chrome, that’s why I had to use onbeforeUnload instead of onUnLoad which seems not to be supported by Chrome?

Answer 1

onbeforeunload can delay the page unload in only one case: When a return statement with a defined value is returned. In this case, the user gets a confirmation dialog, which offers the user an option to not leave the page.

Your desired result cannot be forced in any way. Your animation will run until the browser starts loading the next page:

[User] Navigates away to http://other.website/
[Your page] Fires `beforeunload` event
[Your page] `unload` event fires
[Browser] Received response from http://other.website/
[Browser] Leaves your page
[Browser] Starts showing content from http://other.website/