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 le

Solution 1:

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.

Solution 2:

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 clickedvar 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 donewindow.setTimeout(function () {

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

    returnfalse;
});

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.

Solution 3:

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.