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

Answer 1

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).