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

Question

I work on an auto complete search box that search Database and return users that related to search.I use jquery ajax to do this.when keyup on input element occurred then I send a ajax request to the `/ajax/search/ url like below:

$("#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"});
                    });
                }
            }

        });
    }
})

My problem is when I type 2 letters immediately 2 ajax request sent and I see the search result twice in search result box.I want a way to prevent to send 2th ajax request while first is not completely done.How can I do this ?

EDIT:I finally find the solution in codeproject site thanks for your answers. this is thte link of the solution

Answer 1

The better way is to simply not send a request until the user stops typing. this is easily done using the keydown event and a throttle waiting for 250ms of inactivity. Doing it your way will result in not getting the results that the user wants.

$("#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))
});

Also, when inserting the new results, build the entire result list in a single variable then insert it all at once with .html(thehtml) after the loop.

Answer 2

You should create an additional variable kind of request. This variable will be store link of current ajax-request. When keyup event fire again you should do checking.

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

UPD1: If first ajax-request completed you should set to zero request variable in success callback.

UPD2: Subscribe on change event is better