javascript Ajax 调用完成成功，才真正完成调用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12798876/
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
Ajax call to complete success, before actually completing the call?
提问by EibergDK
I'm trying to figure out an ajax call... I need the call to hold up and finish loading HTML contents, before going over once again (it is triggered by keyup event)... Otherwise returned HTML is actually loaded multiple times. In my case the ajax call returns HTML which then executes a JS function. But when it gets loaded multiple times, JS function is executed twice = bad.
我正在尝试找出一个 ajax 调用......我需要调用来阻止并完成加载 HTML 内容，然后再一次（它由 keyup 事件触发）......否则返回的 HTML 实际上被加载多次. 在我的例子中，ajax 调用返回 HTML，然后执行一个 JS 函数。但是当它被多次加载时，JS 函数被执行两次 = 错误。
Here is my code (alert boxes are only for help...):
这是我的代码（警报框仅用于帮助...）：
$(document).ready(function() {
var isProcessing = false;
$('#productSearchInput').keyup(function() {
var productSearchInput = $(this).val();
var dataString = 'searchInput='+ productSearchInput;
var script_url = '../ajax/service-search.php';
if(productSearchInput.length > 3 && isProcessing === false) {
$.ajax({
type: 'GET',
url: script_url,
data: dataString,
beforeSend:
function() {
isProcessing = true;
alert('Processing input: ' + productSearchInput;
},
success:
function(server_response) {
$('#searchresultdata').html(server_response).show('fast', function() { alert('Currently processing...'); } );
},
error:
function() {
alert('ajax call failed...');
},
complete:
function() {
isProcessing = false;
alert('Processing done');
}
});
}
return false;
});
});
What is wrong is, that the "Processing done" alert appears before the "Wait for processing" alert... And then after "Processing done" alert has showed, the "Wait for processing" alert shows.
错误的是，“处理完成”警报出现在“等待处理”警报之前......然后在“处理完成”警报显示后，“等待处理”警报显示。
I need my HTML server_response to show, before completing the call and setting isProcessing = false;...
在完成调用和设置 isProcessing = false; 之前，我需要显示我的 HTML server_response
How do I achieve that?
我如何做到这一点？
回答by Inferpse
This is normal behavior. Using showmethod requires some time for animation, so callback is called after complete. Why not to simplify your code to something like this:
这是正常行为。使用show方法需要一些动画时间，因此完成后调用回调。为什么不把你的代码简化成这样：
$.ajax({
type: "GET",
url: script_url,
data: dataString,
beforeSend: function() {
isProcessing = true;
alert('Processing input: ' + productSearchInput);
},
success: function(server_response) {
alert('Wait for processing...');
$('#searchresultdata').html(server_response).show('fast', function() {
alert('Processing done');
isProcessing = false;
});
},
error: function() {
alert('ajax call failed...');
}
});
回答by n1ckolas
Why wouldn't you use jQuery.Deferredobject, instead of isProcessing?
为什么不使用jQuery.Deferred对象，而不是isProcessing？
Please check the code in this case (something like this):
请检查这种情况下的代码（类似这样）：
var isProcessing = $.Deferred();
$.ajax({
type: "GET",
url: script_url,
data: dataString,
beforeSend: function() {
alert('Processing input: ' + productSearchInput);
},
success: function(server_response) {
alert('Wait for processing...');
$('#searchresultdata').html(server_response).show('fast', isProcessing.resolve);
},
error: function() {
alert('ajax call failed...');
}
});
$.when(isProcessing).then(function(){alert('Processing done');});
