javascript – jquery ajax：以正确的顺序处理typeahead事件？

我正在使用html jquery和java rest-service后端进行webapp.
我有一个带有预先输入建议的文本字段,因此用户在字段中键入的每个字符都是如此
将触发服务器往返并更新预先建议列表.

代码的基本部分：

    var showTypeaheadSuggestions = function(data) {
        // update ui-element ...
    }

    var displayFailure = function() {
        // update ui-element ...
    }

    var searchText = $("#searchText");
    var searchTextKeyup = function() {
        var txt = searchText.val();
        $.ajax({
            url : typeaheadUrl(txt),type : 'GET',dataType : 'json',}).done(showTypeaheadSuggestions).fail(displayFailure);
    }
    searchText.on('keyup',searchTextKeyup);

它基本上是有效的.
但我正在考虑如果你打字会发生什么,例如,2个字母“ab”(这将首先触发“a”的请求,然后是“ab”的请求)…

然后,如果“a”响应需要更长的时间来处理,并在“ab”响应之后到达,会发生什么？
我是否需要在我的代码中检测到这一点,丢掉“a”响应？

在http://api.jquery.com/jquery.ajax/它确实说：

Promise callbacks — .done(),.fail(),.always(),and .then() — are
invoked,in the order they are registered.

这究竟是什么意思？
我希望这意味着$.ajax()会自动处理上述情况.

但是,当我做一个小测试时(在服务器端,我只是注入了2秒的睡眠延迟,只有当搜索字符串恰好是“a”时),
事实证明它并不像我预期的那样.

预先输入列表将首先使用“ab”响应进行更新,然后在“a”响应时进行更新
到达时,它也会更新,因此预先输入列表会得到错误的建议.

正确处理此问题的既定方法是什么？

最佳答案

如果你想保持服务器端代码没有改变,还有另一种方法.实际上,您可以将返回函数包装在类中并为每个请求创建实例,然后将最新实例存储在全局范围变量中,并检查调用方法的所有者是否与最新实例匹配：

var lastRequest;
var searchText = $("#searchText");

function requestClass()
{
    var that = this;

    this.showTypeaheadSuggestions = function(data) {
        //Update ui-element
        if (lastRequest == that)
            console.log('suggestions retrieved: ' + data);
        else
            console.log('this response (' + data + ') is ignored');
    };

    this.displayFailure = function() {
        //Update ui-element
        console.log('failure');
    };
}

var searchTextKeyup = function() {
    var request = new requestClass();
    lastRequest = request;

    var txt = searchText.val();
    $.ajax({
        url : typeaheadUrl(txt),}).done(request.showTypeaheadSuggestions).fail(request.displayFailure);
}

searchText.on('keyup',searchTextKeyup);

我已经使用您在问题中提出的小测试对此进行了测试(当搜索字符串与’a’字符匹配时添加2秒延迟),结果如下：

suggestions retrieved: ab
this response (a) is ignored

javascript – jquery ajax：以正确的顺序处理typeahead事件？

猜你在找的jQuery相关文章