javascriptjqueryhtmlpushstatepopstate

Is there a way to delay a popstate event?

I've tried a few methods to see if I can create a cross browser solution for delaying a popstate event but have not had any luck.

Anyone have any ideas or thoughts?

Below obviously does not work, but something to the effect of:

$(window).on('popstate', function(e) {

   // something here to delay the history pageload        

      console.log('a wild console has appeared!');

});

So the flow would follow this sequence:

Solution

  • According to the Documentation the popstate event is

    only triggered by doing a browser action such as a click on the back button

    So I do not believe it will get triggered when user clicks 'forward' (and it varies in some browsers)

    For reference, here's the full text:

    The popstate event is fired when the active history entry changes. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState(), the popstate event's state property contains a copy of the history entry's state object.

    Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as a click on the back button (or calling history.back() in JavaScript).

    Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't.

    UPDATED ANSWER ABOVE

    Your code works. (see below) - I added an element to trigger the event (you can see the results in the console)

    Make sure you include the jQuery library on your HTML prior to using it though.

    $(window).on('popstate', function(e) {
  console.log('fired instantly!');
  var timer = setTimeout(function() {
    console.log('delayed popstate!');
    clearTimeout(timer);
  }, 1000);
});

$(window).trigger( 'popstate') ;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>