我怎样才能防止在jQuery中同时发布多个帖子到同一页面？

Question

i have an input search like this:

<input type="search" autocomplete="off" name="searchSchools" id="searchSchools" value="" onKeyUp="searchSchools(this.value)" />

As you can se, every time the onKeyUp event is fired i call a function named "searchSchools" where i search schools matching the current value of the input search in PHP and i return them in JSON format, the problem is that if i type fast more than one request is sent to the PHP page and i want to prevent this, i want to send the post request to the page only if there is no other request to the same page made by this function.

Here is the function:

function searchSchools(name){
    $.post("search-schools.php", { name: name },
    function(data) {
        //-> Here i do whatever with data returned
    }, 
    "json"
    );
}

Answer 1

Add a delay in $.post .. Try like below,

var timer = null, xhrReq = null;
function searchSchools(name){
    if (timer != null) {
       clearTimeout(timer);
    }

    timer = setTimeout(function () {
        if(xhrReq != null) {
           xhrReq.abort(); //to kill all prev request and take the latest
        }

        xhrReq = $.post("search-schools.php", { name: name },
           function(data) {
              //-> Here i do whatever with data returned
           }, 
           "json"
         );
    }, 1000); //will be posted only after 1 second.
}

Edit: Added xhr.abort() to abort any old request and consider only the latest..

Answer 2

var request;
function searchSchools(name){
    if (!request) {
       request = $.post("search-schools.php", { name: name },
       function(data) {
           request = false;
           //-> Here i do whatever with data returned
       }, 
       "json"
       );
    }
}

Answer 3

Assuming you don't want the behavior I pointed out in my first comment on the OP

I like to approach this kind of problem in a more wasteful manner:

var xhr;
function search(term) {
    if (xhr) {
        xhr.abort();
    }

    xhr = $.post(...);
}

This makes the basic logic much easier to handle since the success callbacks of aborted requests won't get called and you always get the most current result regarding the actual input.

If you are wary of starting and aborting potentially many request, introduce a throttler on the appropriate key event - thus also achieving a seperation of the concerns.

Give xhr the proper context in your script - it is global in this example. You want to avoid that.

EDIT1 - added:

xhr is never unset. You might want to do this in in the complete handler of the jQuery AJAX settings object. On the other hand, calling abort() on an aborted or completed request is - in effect - a NOP