嵌套的AJAX具有不同的输入速度

debugcn 发表于 Dev

用户名

我在求职面试中遇到了这个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调用和不同的输入速度，将会发生什么？

Frambot

以上都不是。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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。