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.