将async设置为false的jquery ajax可防止Chrome中先前的显示更改

Question

所以我有这个:

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

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

          return false;   
});

在Firefox中,正确的'yo'警告前身体会变成空白...但是在Chrome中,身体只会在ajax成功后变为空白而'yo'警告即使是$('body').html(' ')调用在ajax之前执行....这是由于async设置设置为false ...如果它是真的它也可以在chrome中正常工作

有没有办法让$('body').html()调用在Chrome中正确调用ajax之前调用,同时保持async标志设置为false？

另外,最好不要设置超时

Answer 1

在使用该代码进行AJAX调用之前,您确定已经看到该页面变为空白吗？这不应该发生在任何浏览器中.

当脚本运行时,浏览器窗口根本不会更新,因此同步调用将阻止所有更新.

要在AJAX调用之前更新浏览器,请使用setTimeout,这将在发送请求之前将控件返回到浏览器:

$('.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;   
});

注意:这当然意味着您不能在函数的返回值中使用请求的结果,如果这是同步调用的意图.如果您需要事件处理程序是同步的,则无法在AJAX请求之前更新浏览器.