jquery ajax with async set to false prevents previous display changes in Chrome

Question

so I have this:

$('.something').click(function(){
          $('body').html('');

          $.ajax({
            url: 'someurl',
            dataType: 'json',
            async: false,
            success: function(data){
              //do stuff
              alert('yo');
            }
          });

          return false;   
});

in Firefox, body would become blank BEFORE the 'yo' alert correctly...But then in Chrome, body would only become blank after the ajax succeeds and the 'yo' alert even though the $('body').html('') call is performed before the ajax....this is due to the async setting which is set to false...if it's true it'll work properly in chrome as well

is there a way to have the $('body').html() call gets called BEFORE the ajax call properly in Chrome while keeping the async flag set to false?

Also it would be preferrable to not have to set timeout

Answer 1

Are you sure that you have seen that the page becomes blank before the AJAX call with that code? That should not happen in any browser.

The browser window is not updated at all while a script is running, so the synchronous call will block all updates.

To make the browser update before the AJAX call, use setTimeout, that will return the control to the browser before the request is sent:

$('.something').click(function(){
  $('body').html('');

  window.setTimeout(function() {

    $.ajax({
      url: 'someurl',
      dataType: 'json',
      async: false,
      success: function(data){
        //do stuff
        alert('yo');
      }
    });

  }, 0);

  return false;   
});

Note: This will of course mean that you can't use the result from the request in the return value of the function, if that was the intention with the synchronous call. If you need the event handler to be synchronous, you can't update the browser before the AJAX request.

Answer 2

Quote from http://api.jquery.com/jquery.ajax/

async (default: true) Type: Boolean By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().

Maybe you can try this: Clean the body with $.ajax beforeSend: function () {}

$('.something').click(function() {  
    $.ajax({
        url: 'someurl',
        dataType: 'json',
        async: false,
        beforeSend: function (){
          $('body').html('');
        },
        success: function(data){
          //do stuff
          alert('yo');
        }
    });

    return false;   
});