How do I make window.onbeforeunload wait for animation?

Question

Consider the following JavaScript code, with an animation library (i.e. scriptaculous) to boot.

window.onbeforeunload = function(event) {
    document.body.fade();
}

Leaving the page is instantaneous and doesn't wait for the animation to complete. Even though everywhere I look people say JS doesn't support threads, something is running in parallel here, because it seems the one will not wait for the other. Am I right about the threads, and is there any way to achieve what I'm trying to do here?

Answer here - http://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own You can't do anything except return a string to be used in the confirmation dialog. This is to prevent malicious code running when users try to leave a page. — Simon Smith, Feb 23 '12 at 00:52
This just helped me: http://stackoverflow.com/a/15614577/2030429 If few miliseconds is enough for you… — Michal Politzer, Mar 30 '17 at 08:49
Does this answer your question? [How can I override the OnBeforeUnload dialog and replace it with my own?](https://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own) — Brian Tompsett - 汤莱恩, Dec 12 '20 at 16:58
YES YOU CAN DO! Here is my solution: https://stackoverflow.com/a/65315035/12824729 — MarchalPT, Dec 15 '20 at 23:20

score 0 · Answer 1 · answered Mar 18 '22 at 13:06

A bit late but I think give an answer is interesting for futur SO users.

So there is multiple way to sync your code to this and so you should add a custom waiter.

window.onbeforeunload = function(event) {
    document.body.fade();
    while ((new Date()).getTime() < (new Date()).getTime()) + (1 *1000));
}

I guess you could also try with promises:

function sleep(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve(null);
    }, time);
  });
}

window.onbeforeunload = async function(event) {
    document.body.fade();
    await sleep(1 * 1000);
}

How do I make window.onbeforeunload wait for animation?

1 Answers1