javascript 在（同步）Ajax 期间停止浏览器锁定？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9755485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop browser locking during (synchronous) Ajax?
提问by Ray
What I am trying to do is append a loading image to a div (so the user knows something is loading) and then I call a jquery ajax function, which is set to "async: false". Here is my code:
我想要做的是将加载图像附加到 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){
}
});
The problem is that the browser locks and does not append the loading image until AFTER the ajax call is done which is useless of course. Firefox is the only browser that actually appends the loading image. IE, Chrome, and Safari DO NOT append the loading image.
问题是浏览器会锁定并且在 ajax 调用完成之前不会附加加载图像，这当然是无用的。Firefox 是唯一实际附加加载图像的浏览器。IE、Chrome 和 Safari 不附加加载图像。
I know browser locking happens because async is set to false but this is my only option because I have to wait for this request to complete before continuing because I need the data that is returned.
我知道发生浏览器锁定是因为 async 设置为 false 但这是我唯一的选择，因为我必须等待此请求完成才能继续，因为我需要返回的数据。
Is there any way around this? If I place an alert after the I append the loading image that works but I don't want an alert popping up every time.
有没有办法解决？如果我在附加加载图像后放置警报，但我不希望每次都弹出警报。
采纳答案by nnnnnn
Despite your assertion to the contrary you don't needit to be synchronous. Whatever you need to do with/after the response can be done in the success (and/or error or complete) callback. So change:
尽管您有相反的断言，但您不需要它是同步的。无论您需要在响应中/之后做什么，都可以在成功（和/或错误或完成）回调中完成。所以改变：
$jQuery("#playersListDiv").html(loadingImage);
$jQuery.ajax({
...
async: false,
...
});
// OTHER CODE
to be like this:
像这样：
$jQuery("#playersListDiv").html(loadingImage);
$jQuery.ajax({
...
async: true,
success: function(data) {
// OTHER CODE
}
});
Or move "OTHER CODE" to a separate function that you call from the success callback.
或者将“其他代码”移动到您从成功回调调用的单独函数中。
If you need something more complicated than that you could encapsulate the above in a function and pass a callback to it:
如果您需要比这更复杂的东西，您可以将上述内容封装在一个函数中并向它传递一个回调：
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
});
回答by mmushtaq
I came across this issue and I found a solution for it.
Suppose! you are really in need to use async : falsein your ajax requestand you want to show a loading Image while execution of ajaxrequest. But ajaxrequest is halting other UI operation (displaying of loading image) due to async : false. So, the simple solution for it, Use fadeInto display loading image and fadeOutto hide loading image.
我遇到了这个问题，并找到了解决方案。
认为！您确实需要async : false在您的应用中使用，ajax request并且希望在执行ajax请求时显示加载图像。但是ajax由于async : false. 所以，简单的解决方案，使用淡入淡出显示加载图像和淡出隐藏加载图像。
Here is a jsFiddledemo which contains a ajaxrequest with async : false. Due to this, the loading Image in not displaying. (I used showmethod to display loading image.).
这是一个jsFiddle演示，其中包含一个ajax带有async : false. 因此，加载图像不显示。（我使用show方法来显示加载图像。）。
Here is another jsFiddlewith fadeIn and fadeOut effect. It displays loading image regardless of async : falsein ajaxrequest.
这里是另一个的jsfiddle有淡入淡出和效果。不管它显示加载图像async : false中ajax的请求。
回答by SenorAmor
What you want is jQuery.Deferred().
你想要的是jQuery.Deferred()。
