Page waits for AJAX before changing location

Question

This question might seem a bit odd, the problem arised when the page went through webtests.

The page uses an AJAX call (async set to true) to gather some data. For some reason it won't swap pages before the AJAX call has returned - consider the following code:

console.log("firing ajax call");
$.ajax({
        type:    "POST",
        url:      "requestedService",
        data:     mode : "requestedMethod",
        cache:    false,
        dataType: "json",
        success:  function() { console.log("ajax response received") },
        error:    null,
        complete: null,
    });
console.log("changing window location");
window.location = "http://www.google.com"

The location only changes after AJAX returns the response. I have tested the call, it is in fact asynchronous, the page isn't blocked. It should just load the new page even if the AJAX call hasn't completed, but doesn't. I can see the page is trying to load, but it only happens once I get the response. Any ideas?

The console output is:

firing ajax call
changing window location
ajax response received

Like I said, this isn't really a required Use-Case but it happens while performing webtests (they load the page, check stuff, and then more or less instantly navigate to the next page). They fail because they are blocked from navigating to the next page before AJAX returns. — enp4yne, Oct 31 '13 at 12:30
Yes and as expected it just blocks the page until the call returns, no other difference in behaviour — enp4yne, Oct 31 '13 at 12:38

score 2 · Answer 1 · answered Oct 31 '13 at 13:27

2

This seems to work fine for me. The location is changed before the code in the async handler executes. Maybe you should post some real code and not a simplified version, so that we can help better.

Here is a demonstration that works as you expect: http://jsfiddle.net/BSg9P/

$(document).ready(function() {

    var result;

    $("#btn").on('click', function(sender, args) {
        setInterval(function() {
            result = "some result";
            console.log("Just returned a result");
        }, 5000);
        window.location = "http://www.google.com";
     });

});

And here is a screenshot of the result: http://screencast.com/t/VbxMCxxyIbB

I have clicked the button 2 times, and you can see in the JS console that the message about the location change is printed before the result each time. (The error is related to CORS, if it was the same domain, it would navigate).

answered Oct 31 '13 at 13:27

Slavo

15,255
11
47
60

I edited the question. I used the logger as well and according to the output the page SHOULD load before the response comes back. However the page just waits for the ajax response to come back before actually changing location... – enp4yne Oct 31 '13 at 13:41
So if your code statements are executed in the proper order, is it possible that the browser just takes a while to redirect and that's causing the delay? The console output you have shown seems exactly what you want, right? – Slavo Oct 31 '13 at 13:46
Yes, the output indicates that it's doing what it should. However I can see that the page is waiting for the ajax call to return - if the ajax call takes longer, the redirect takes longer too. – enp4yne Oct 31 '13 at 14:46
I think this is just a matter of perception. If your code runs OK, there's nothing more you can do to control it. It's up to the browser to handle the async request and the location change. – Slavo Oct 31 '13 at 14:55

score 0 · Answer 2 · answered Jan 31 '19 at 16:53

Bit late but maybe someone else will have the same issue. This answer by @todd-menier might help: https://stackoverflow.com/questions/941889#answer-970843

So the issue might be server-side. For eg, if you're using PHP sessions by default the user's session will be locked while the server is processing the ajax request, so the next request to the new page won't be able to be processed by the server until the ajax has completed and released the lock. You can release the lock early if your ajax processing code doesn't need it so the next page load can happen simultaneously.

Page waits for AJAX before changing location

2 Answers2