javascript - 异步设置为 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 中，body 会在正确发出“yo”警报之前变为空白...但是在 Chrome 中，即使 $('body'). html('') 调用在 ajax 之前执行....这是由于设置为 false 的异步设置...如果它是 true，它也会在 chrome 中正常工作

有没有办法让 $('body').html() 调用在 Chrome 中正确调用 ajax 之前被调用，同时保持异步标志设置为 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 请求之前更新浏览器。