在（同步）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但这是我唯一的选择，因为我必须等待此请求完成才能继续，因为我需要返回的数据。

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

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

我遇到了这个问题，我找到了解决方案。
假设！ 你真的需要在你的ajax request使用async : false ，并且你想在执行ajax请求时显示加载的图像。 但是由于async : false ajax请求正在停止其他UI操作（显示加载图像）。 因此，对它的简单解决方案，使用fadeIn显示加载图像和fadeOut来隐藏加载图像。

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

这是另一个带有fadeIn和fadeOut效果的jsFiddle。 它在ajax请求中显示加载图像而不管async : false 。