另一个ajax请求正在处理时如何防止发送ajax请求？

Question

我上的自动完成搜索框，搜索数据库的工作并返回相关search.I使用jQuery AJAX用户做this.when keyup上出现输入元素，然后我送一个Ajax请求`/ AJAX /搜索/网址，如下所示：

$("#search").keyup(function(){
    $(".itemSearch").remove();
    $(".notfound").hide();
    $("#searchResultSection").height("70px");
    if(!$("#search").val()){
        $("#searchResultSection").slideUp();
        $(".ajaxLogoSearch").hide();
        $(".notfound").hide();
    }
    else{
        var data = {
            query: $("#search").val()
        };
        $("#searchResultSection").slideDown();
        $(".ajaxLogoSearch").show();
        $.ajax({
            url: '/ajax/search',
            data: data,
            dataType:'json',
            success:function(result){
                if(result.found==0){
                    $(".ajaxLogoSearch").hide();
                    $(".notfound").show();
                }
                else{
                    var searchResult = $("#searchResultSection");
                    $(".ajaxLogoSearch").hide();
                   searchResult.css({"height":20});

                    for(var i=0;i<result.users.length;i++){
                        var content = '<div class="itemSearch">\
                <img src="../../static/social/images/defaultMaleImage.png" height="50px">\
                <p>'+ result.users[i].firstname+ ' '+ result.users[i].lastname +'</p>\
            </div>'
                        if(searchResult.height() < 370){
                            searchResult.height("+=70px");
                        }
                        $("#innerSearch").append(content);
                    }
                    $(".itemSearch").hover(function(){
                        $(this).css({"background":"rgb(55, 108, 221)"});
                    },function(){
                        $(this).css({"background":"#658be6"});
                    });
                }
            }

        });
    }
})

我的问题是当我立即键入2个字母2 ajax请求发送，我在搜索结果框中看到搜索结果两次。我想要一种方法来防止发送第2个ajax请求，而第一个没有完全完成。我怎么能这样做？

编辑：我终于在codeproject网站找到解决方案感谢您的答案。 这是解决方案的链接

Answer 1

更好的方法是在用户停止输入之前不发送请求。 使用keydown事件和等待250毫秒不活动的油门很容易完成。 按照自己的方式进行操作将导致无法获得用户想要的结果。

$("#search").on("keydown",function(){
    var $this = $(this);
    clearTimeout($this.data("throttle"));
    $this.data("throttle",setTimeout(function(){
        doSearch.call($this.get(0),$this.val()); // perform the ajax search
    },250))
});

此外，在插入新结果时，在单个变量中构建整个结果列表，然后在循环后使用.html（thehtml）将其全部插入。

Answer 2

您应该创建一个额外的变量类型的请求。 该变量将是当前ajax-request的存储链接。 当keyup事件再次触发时，您应该进行检查。

if(request) {
    request.abort();
}
request = $.ajax({/* */});

UPD1：如果第一个ajax-request完成，则应在成功回调中将请求变量设置为零。

UPD2：订阅变更事件更好