在(同步)Ajax期间停止浏览器锁定？

Question

我想要做的是将一个加载图像附加到div(所以用户知道正在加载的东西)然后我调用一个jquery ajax函数,它被设置为"async:false".这是我的代码:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
         type: "POST", /* this goesn't work with GET */
         url: urlValue, /*ex: "NBAgetGamesList.php" */
         data: parameters, /*ex: "param1=hello" */
         cache: false,
         async: false,
                     success: function(data){

                     }
});

问题是浏览器锁定并且不会附加加载图像,直到完成ajax调用之后,这当然没用.Firefox是唯一实际附加加载图像的浏览器.IE,Chrome和Safari不要附加加载图片.

我知道浏览器锁定发生是因为async设置为false但这是我唯一的选择,因为我必须等待此请求完成才能继续,因为我需要返回的数据.

有没有办法解决？如果我在添加有效的加载图像之后发出警报,但我不希望每次都弹出警报.

Answer 1

尽管你的断言恰恰相反,但你并不需要它是同步的.无论您需要做什么/在响应之后都可以在成功(和/或错误或完成)回调中完成.所以改变:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: false,
   ...
});
// OTHER CODE

是这样的:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: true,
   success: function(data) {
      // OTHER CODE
   }
});

或者将"OTHER CODE"移动到您从成功回调中调用的单独函数.

如果你需要比这更复杂的东西,你可以将上面的内容封装在一个函数中,并将回调函数传递给它:

function doAjaxStuff(callback) {
    $jQuery("#playersListDiv").html(loadingImage);    
    $jQuery.ajax({
       ...
       async: true,
       success: function(data) {
          // optional other processing here, then:
          callback(data);
       }
    });
}

// then from somewhere else in your code:
doAjaxStuff(function(data) {
   // do something with data
});