具有不同输入速度的嵌套 AJAX
Nested AJAX with different input speed
我在求职面试中遇到了这个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-在向ASDF请求之前显示来自qwer的当前搜索查询的描述
对我来说,甚至选择也不是很清楚。那么在您看来,如果我们有一个嵌套的 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);
相关文章:
- 原型Ajax请求参数为嵌套json
- jQuery通过嵌套的ajax调用延迟对象
- 使用嵌套AJAX调用的响应填充数组
- 在嵌套循环中处理 AJAX (Angularjs)
- 嵌套另一个 Ajax 请求时,Ajax 响应处理中断
- 处理嵌套 ajax 请求的正确方法
- 具有不同输入速度的嵌套 AJAX
- Magento/JavaScript/Prototype:需要有关嵌套AJAX调用中命名空间的信息
- 从嵌套ajax调用的函数返回一个对象
- 嵌套AJAX和用户事件
- 我可以嵌套Ajax调用吗?假设在前一个xmlhttprequest的回调中启动一个新的xmlhttprequest
- 嵌套AJAX调用中的变量作用域
- 嵌套ajax调用,其值从第一个到第二个ajax调用's url
- 嵌套AJAX函数- 500内部错误
- 使用.done的嵌套AJAX调用
- 带有嵌套AJAX调用的JavaScript承诺不起作用
- 当使用现有的HttpProxy添加嵌套ajax调用时,远程过滤值不应用于网格
- JavaScript/jQuery变量作用域问题与嵌套.ajax()调用有关
- 在Prototype中嵌套Ajax调用
- jQuery自动完成嵌套Ajax调用