delaying actions between keypress in jQuery

Sinan picture Sinan · Mar 9, 2010 · Viewed 22.7k times · Source

How can I delay actions between keypress in jQuery. For example;

I have something like this

 if($(this).val().length > 1){
   $.post("stuff.php", {nStr: "" + $(this).val() + ""}, function(data){
    if(data.length > 0) {
      $('#suggestions').show();
      $('#autoSuggestionsList').html(data);
    }else{
      $('#suggestions').hide();
    }
 });
}

I want to prevent posting data if the user continously typing. So how can I give .5 seconds delay?

Answer

Nick Craver picture Nick Craver · Mar 9, 2010

You can use jQuery's data abilities to do this, something like this:

$('#mySearch').keyup(function() {
  clearTimeout($.data(this, 'timer'));
  var wait = setTimeout(search, 500);
  $(this).data('timer', wait);
});

function search() {
  $.post("stuff.php", {nStr: "" + $('#mySearch').val() + ""}, function(data){
    if(data.length > 0) {
      $('#suggestions').show();
      $('#autoSuggestionsList').html(data);
    }else{
      $('#suggestions').hide();
    }
  });
}

The main advantage here is no global variables all over the place, and you could wrap this in an anonymous function in the setTimeout if you wanted, just trying to make the example as clean as possible.