Delay for beforeunload Javascript

Question

I'm trying add delay to window onbeforeunload script. I have a css animation for 0.3s and need 0.3s delay before unload page. Is it possible? My example code is here;

window.onbeforeunload = function (event) {
    $('.page-loader').removeClass("page-loader--hidden").addClass("page-loader--fading-in");
};

do you happen to have a fiddle page where we can check what is going on ? — trk, Aug 27 '17 at 20:18
Possible duplicate of [Delay page close with Javascript?](https://stackoverflow.com/questions/8350215/delay-page-close-with-javascript) — Amogh, Aug 27 '17 at 20:28
Here is my solution: https://stackoverflow.com/a/65315035/12824729 — MarchalPT, Dec 15 '20 at 23:17
Here is Solution works for me : https://stackoverflow.com/a/72227451/5114465 — Shurvir Mori, May 13 '22 at 09:40

score 0 · Answer 1 · answered Aug 27 '17 at 20:53

Okay, what I noticed was that you are able to replicate the required CSS animation while traversing an anchor link or while refreshing/reloading a page. However, you are unable to repeat the same effect for closing the browser tab. I am guessing there are some restrictions on that.

Please refer: https://developer.mozilla.org/en-US/docs/Web/Events/unload. And, the link about beforeunload event within.

score 0 · Answer 2 · answered Nov 22 '17 at 06:47

The answer to What are the limitation using before unload event? explains that:

The only way to guarantee your function will run to completion is to make sure you're writing synchronous code that blocks the event

In this particular example, the classes would be applied, but css transitions would most likely not show as they are completely separate to the javascript call and are not blocking.

If you would like your animations to show, then you would most likely need to either trigger a javascript function that runs for the duration of your animation but doesn't stop css animations, or change your animation over to a javascript function or library instead.

I've had success with a number of sites by using jQuery animations. In your case, it might look something similar to this:

window.onbeforeunload = function(){
    $('.page-loader').removeClass("page-loader--hidden").hide().fadeIn(300);
};

Delay for beforeunload Javascript

2 Answers2