javascript - How to queue ajax request while the server is still processing previous request? -

i'm performing live server side search while user typing in browser. seach functionality can't keep typing pace, requests pile up.

i want able cancel queries replaced new queries before server ready respond.

this want achieve:

• the first keystroke should sent server.
• the next key stroke should queued client side script until server responds first query.
• if, in meantime, keystroke happens should replace queued keystroke.

this way, recent keystroke gets sent server, once server ready. of course, if there no queue, keystroke should sent straight server.

my current implementation dead simple:

$.ajax({   type: "get",   datatype: "script",   data: {     search: "something"   },   url: "/api/search",   success: function(data, status, xhr) {},   error: function(xhr, textstatus, errorthrown) {} }); 

i think approach going flood server, because you're sending request server on each keystroke. , if abort request on client side @sravans said, server still receive , start process of them. http request once sent on net, can't stop it, can no client side abort it, assume notifies server or ignores response sends, still you're flooding it.

maybe implementing delay recognize when user stopped typing best approach. generic delayed event handler factory, easy use, pass function , assign delay. if x miliseconds passed between keystrokes, request sent, if keystroke happens before delay, you're not going make request.

function delayedevent(eventhandler, delay) {     var lasttimeout = null;      return function () {         var = this,             args= array.prototype.slice.call(arguments).sort();          if (lasttimeout !== null)             window.cleartimeout(lasttimeout);          lasttimeout = window.settimeout(function () {             eventhandler.apply(that, args);         }, delay);     }; }  $('... selector ...').on('event', delayedevent(function () { ... code ... }, 500)); 

edit: how can implement queue, haven't tested code, use starting point.

function eventqueue(requestmaker) {     // here store last event queued, it'll wait until running events done.     var lastqueued = null,         runningqueue = [];      // push new event running queue     function pushrunning(topush) {         runningqueue.push(topush.done(             // necesary use iife index value , not reference             (function (index) {                 return function() {                     // remove event runningqueue                     runningqueue.splice(index, 1);                     // if queue has been completed, start running last event sent                     if (lastqueued !== null && runningqueue.length === 0) {                         pushrunning(lastqueued());                     }                 }             }(runningqueue.lenght));         ));     }      return function () {         var = this,             args = array.prototype.slice.call(arguments).sort();          // events running, override lastqueued         if (runningqueue.length > 0) {             lastqueued = requestmaker.bind(that, args);         } else {         // nothing queued run event straight away, , queue running             pushrunning(requestmaker.apply(that, args));         }     }; }  $('... selector ...').on('event', eventqueue(function () {      // it's extremely important return jquery $.ajax promise     return $.ajax(...); }, 500));