jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – jquery ajax:以正确的顺序处理typeahead事件?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用html jqueryjava 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/它确实说:

这究竟是什么意思?
我希望这意味着$.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事件?全部内容,希望文章能够帮你解决javascript – jquery ajax:以正确的顺序处理typeahead事件?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。