Ajax delay is not working

Question

$(document).ready(function() {
   setInterval($("#to").on("change keyup paste click mouseout", function() {
      $.get('ajaxSearch.php', $("#form").serialize(), function(data) {
         $('#result').html(data);
      });
   }, 3000);
});

ajax delay or setTimeout is not working. I want to delay on input field and run ajax after 3 sec but it is not working.

Answer 1

You should use setTimeout to delay the ajax request.

And if one of change keyup paste click mouseout event fired, you just cancel the previous delay and create a new one.

$(document).ready(function() {
   var timer_id;
   $("#to").on("change keyup paste click mouseout", function() {
      if (timer_id) {
          clearTimeout(timer_id);
      }
      timer_id = setTimeout(function() {
         $.get('ajaxSearch.php', $("#form").serialize(), function(data) {
            $('#result').html(data);
         });
      }, 3000);    
   });
});

Answer 2

Your syntax is wrong, also the setInterval() should be in the handler

$(document).ready(function () {
    var interval;
    $("#to").on("change keyup paste click mouseout", function () {
        if (interval) {
            return
        };
        setInterval(function () {
            $.get('ajaxSearch.php', $("#form").serialize(), function (data) {
                $('#result').html(data);
            });
            interval = undefined;
        }, 3000);
    });
});

Also if there is already a interval in progress, we need not have to add another call.

Answer 3

In your case you set deley to event handling ( and whyy you use setInterval but not setTimeout ? )

try

$(document).ready(function() {
    $("#to").on("change keyup paste click mouseout", function() {
        setTimeout(function(){
            $.get('ajaxSearch.php', $("#form").serialize(), function(data) {
                $('#result').html(data);
            });
        }, 3000);  
    });
});