在（同步）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
   }
});

或将“其他代码”移至您从成功回调中调用的单独函数。

如果您需要比这更复杂的东西，则可以将以上内容封装在一个函数中，并向其传递回调：

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
});