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

Answer 2

你想要的是jQuery.Deferred()。

Answer 3

我遇到了这个问题，我找到了解决方案。
假设！您真的需要在async : false中使用ajax request，并希望在执行ajax请求时显示加载图片。但ajax请求正在暂停因async : false而导致的其他UI操作（显示加载图像）。因此，它的简单解决方案是，使用fadeIn显示加载图片，使用fadeOut隐藏加载图片。

这是一个jsFiddle演示，其中包含ajax async : false请求。因此，加载图像不显示。（我用show方法显示加载图像。）。

这是另一个带有fadeIn和fadeOut效果的jsFiddle。无论async : false请求中的ajax如何，它都会显示加载图片。

在（同步）Ajax期间停止浏览器锁定？

3 个答案: