中止以前的ajax请求但延迟？

Question

Need to abort all the previous search queries ran by Ajax requests, after the user types/appends next letter in the search box.

I have used the following code to perform the desired results. Declared an object jqxhr to abort the ajax requests :

var jqxhr = {abort: function () {}}

And then on making a call to ajax when user types something new, inititated this object like this :

jqxhr = $.ajax({
        type: "GET",
        url: "ContentAjax.php",
        cache: false,
        dataType: 'json',
   .........OHER CODE HERE.........

Now the problem is ajax requests are aborted , if the user types new letter and changing the latest search quesry. But the php is still executing and so is waking up mysql to work for no use, slowing down website badly and I know we can't kill php action with javascript here.

So I tried to delay the ajax request like this :

jqxhr = setTimeout(function(){ $.ajax({...code..}) }, 3000);

or

setTimeout(function(){ jqxhr = $.ajax({...code..}) }, 3000);

But none of these worked. It shows an error saying jqxhr.abort() is not defined. or the php action still does not stop.

Please help me in this problem, Thank you.

Answer 1

if you want to set an ajax timeout

let timeout;

$('#yourId').on('click',function(){
   if(typeof timeout != 'undefined'){ 
       clearTimeout(timeout);
   }
  timeout = setTimeout(function() {
    //your code here
  },
  200); //milliseconds
});