小编典典

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

ajax

我想做的是将加载图像添加到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,但这是我唯一的选择,因为我需要等待该请求完成才能继续,因为我需要返回的数据。

有没有办法解决?如果我在警报之后添加了可以正常工作的加载图像,但我不想每次都弹出警报。


阅读 397

收藏
2020-07-26

共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
});
2020-07-26