retarder les actions entre une pression de touche dans jQuery

Question

Comment puis-je retarder les actions entre la pression de touche dans jQuery. Par exemple;

J'ai quelque chose comme ça

  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();
    }
 });
}
 

Je souhaite empêcher la publication de données si l'utilisateur tape continuellement. Alors, comment puis-je donner un délai de 0,5 seconde?

Answer 1

Vous pouvez utiliser les capacités de données de jQuery pour ce faire, quelque chose comme ceci:

 $('#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();
    }
  });
}
 

Le principal avantage ici n'est pas de variables globales partout, et vous pouvez envelopper cela dans une fonction anonyme dans le setTimeout si vous le souhaitez, en essayant simplement de rendre l'exemple aussi propre que possible.

Answer 2

Tout ce que vous devez faire est d'envelopper votre fonction dans un délai qui est réinitialisé lorsque l'utilisateur appuie sur une touche:

 var ref;
var myfunc = function(){
   ref = null;
   //your code goes here
};
var wrapper = function(){
    window.clearTimeout(ref);
    ref = window.setTimeout(myfunc, 500);
}
 

Ensuite, appelez simplement "wrapper" dans votre événement clé.

Answer 3

Il y a un bon plugin pour gérer cela. jQuery Throttle / Debounce

Answer 4

Je l'envelopperais dans une fonction comme ceci:

   var needsDelay = false;

  function getSuggestions(var search)
  {
    if(!needsDelay)
    {
        needsDelay = true;
        setTimeout("needsDelay = false", 500);

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


  }
 

De cette façon, peu importe le nombre de fois que vous exécutez cette commande, vous ne rechercherez jamais plus de 500 millisecondes.

Answer 5

La réponse de Nick est parfaite mais si la gestion immédiate du premier événement est critique, je pense que nous pouvons le faire:

 if($(this).val().length > 1){
    if !($.data(this, 'bouncing-locked')) {

        $.data(this, 'bouncing-locked', true)

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

        self = this
        setTimeout(function() {
            $.data(self, 'bouncing-locked', false)
        }, 500)
    }
}