我在面试时遇到了这个ajax问题:
我们有这段代码,其中 onChange 进行 AJAX 调用(到 asdf 服务器),同时还进行另一个 AJAX 调用(到 qwer 服务器),
function onDescription(description) {
var content = $('').text(description);
$('#results').append(content);
}
function onSearchResults(searchResults){
$('#results').html('');
$.each(searchResults, function(result){
$.ajax({
url: 'http://qwer.com/describe',
dataType: 'json',
data: result,
success: onDescription
});
});
}
function onChange(){
$.ajax({
url:'http:://asdf.com/search',
dataType: 'json',
data: $('#search').val(),
success: onSearchResults
});
}
$('#search').keydown(onChange);
问题是:如果用户以不同的速度输入文本会发生什么。
1- asdf 服务器将重载 2-当用户快速输入文本时,将不会显示来自qwer的描述 3-将显示预览搜索的结果而不是当前的 4- qwer 对当前搜索查询的描述显示在对 asdf 的请求之前
对我来说,连选择都不是很清楚。 那么您认为如果我们有嵌套的 AJAX 调用和不同的输入速度会发生什么?
最佳答案
以上都不是。 AJAX 被设计为非确定性的。如果用户开始输入“moon”,则会向 asdf 发送四个请求:“m”、“mo”、“moo”和“moon”。但结果返回的顺序是不确定的。服务器可能需要不同的时间来响应每个请求。您可能会按照“moo”、“m”、“moon”、“mo”的顺序收到回复。随着打字速度的不同,结果可能会发生变化,但这取决于。
安全的做法是忽略先前查询的结果。这是一个快速修复:
function onDescription(description) {
var content = $('').text(description);
$('#results').append(content);
}
var searchResultQuery = '';
function onSearchResults(query){
searchResultQuery = query;
return (function(query) {
return function(searchResults) {
if (query != searchResultQuery) {
return;
}
$('#results').html('');
$.each(searchResults, function(result){
$.ajax({
url: 'http://qwer.com/describe',
dataType: 'json',
data: result,
success: onDescription
});
});
};
})(query);
}
function onChange(){
$.ajax({
url:'http:://asdf.com/search',
dataType: 'json',
data: $('#search').val(),
success: onSearchResults($('#search').val())
});
}
$('#search').keydown(onChange);
关于javascript - 具有不同输入速度的嵌套 AJAX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18938539/