Javascript 不同输入速度的嵌套AJAX

Javascript 不同输入速度的嵌套AJAX,javascript,jquery,ajax,Javascript,Jquery,Ajax,在一次工作面试中,我有一个阿贾克斯问题: 我们有这样一段代码,onChange进行一个AJAX调用(到asdf服务器),这也会进行另一个AJAX调用(到qwer服务器) 问题是:如果用户以不同的速度输入文本会发生什么 1-asdf服务器将过载 2-当用户快速输入文本时,qwer中的描述将不会显示 3-将显示预览搜索结果,而不是当前搜索结果 4-qwer对当前搜索查询的描述显示在向asdf发出请求之前 对我来说,连选择都不是很清楚。 那么在您看来,如果我们有一个嵌套的AJAX调用和不同的输入速度,

在一次工作面试中,我有一个阿贾克斯问题:

我们有这样一段代码,onChange进行一个AJAX调用(到asdf服务器),这也会进行另一个AJAX调用(到qwer服务器)

问题是:如果用户以不同的速度输入文本会发生什么

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);
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);