How can I delay leaving a page via javascript?

I'm trying to get add a delay of 1000ms before a person leaved the page. I'm using the beforeunload event to start a jquery animation and would like it to finish before the page leaves.

I'm not concerned with olde开发者_运维知识库r browsers, IE9, latest safari, chrome and FF4 are all i'm interested in.

Edit: Well I was hoping to implement it when just navigating internal pages. Sure I can make all my internal links a javascript call, but I would have preferred a less brute force method.

Also, I'm not stopping people from leaving the page, not even making them wait a huge long time, 1 second for a fade out? Thats no worse than every game I play fading out when I select quit.

Now had I asked how do I prevent a person from leaving a page, then yes all the "don't do it" would have been deserved.

Firstly, if people want to leave your page, don't put any barriers or difficulties in leaving it. Just let them.

Konerak said it well...

Using a blocking action is acceptable when the user is about to lose data by leaving the page, but using them for animations and gimmicks will quickly annoy your users.

Secondly, you can only prevent automatic closing with a blocking action, such as an alert() or prompt(), which temporary blocks the browser's viewport, waiting for user response.

jsFiddle.

Well I was hoping to implement it when just navigating internal pages.

I know it’s four years later now, but I wanted to point out that, within the bounds you’ve described, you can do this.

$(document).on("click", "a", function (e) {// Listen for all link click events on the page (assuming other scripts don’t stop them from bubbling all the way up)
    // Stop the link from being followed.
    e.preventDefault();

    // Grab the link element that was clicked
    var linkClicked = e.target;

    // I'm using setTimeout to just delay things here, but you would do your animation and then call a function like this when it’s done
    window.setTimeout(function () {

        // Simulate navigation
        window.location = linkClicked.href;
    }, 1000);

    return false;
});

It’s still inadvisable:

• I suspect it would get annoying to users pretty quickly
• Without additional code, this would prevent users from command/control-clicking to open links in a new tab.

8 years later and I'm about to code this for my own website, specifically as a fade between pages. But I'm only going to do this for navigating between pages within my site, and I'm not going to use window.onbeforeunload or window.onclick. I attach a click event handler to specific "buttons" on each page. pointer-events is even disabled for other elements, so the event's element scope is very limited. The code is a switch() statement with cases for each "button". Each button navigates to a specific page within the site.

I don't think this is bad web page or web site behavior. A 1 second delay when transitioning between pages is not going to annoy users. I think you might be able to get 2 seconds or more out of it, if you include the time it takes to load the destination page, which can also fade in gradually in as it loads data.

It's visually elegant, especially compared to typical news/info sites with flex layouts that shift all over the page while they load. Those pages spend 2 or more seconds shifting stuff around before you can read anything.

My site is already filled with CSS and SVG animations, so adding this to the internal page navigation is no sweat for this project. If you limit the element scope of the user events and you make the delays small, this is good behavior, not bad behavior, IMO. Visual elegance has value.

EDIT- As I get into it, I see that for one group of similar pages I can achieve better cross-fading between them by consolidating them into one page. That way I can truly cross-fade between each sub-page instead of fading out one page then fading in another.