les recours dilatoires entre keypress en jQuery

Comment puis-je retarder les actions entre les keypress en jQuery.
Par exemple;

J'ai quelque chose comme ce

 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 veux empêcher la publication de données si l'utilisateur sans interruption de la frappe. Alors, comment puis-je donner .5 secondes de retard?

  • Je suppose que c'est une fonction qui est passé dans keypress()?
InformationsquelleAutor Sinan | 2010-03-09
  1. 62

    Vous pouvez utiliser jQuery données de capacités 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 est pas de variables globales dans tous les sens, et vous peut encapsuler dans une fonction anonyme dans le setTimeout si tu voulais, juste essayer de faire de l'exemple aussi propre que possible.

    InformationsquelleAutor Nick Craver
  2. 11

    Tout ce que vous devez faire est d'envelopper votre fonction dans un délai d'attente qui est remis 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);
}

    Puis suffit de l'appeler "wrapper" de votre événement clé.

    • +1 moins de jQuery pour une solution simple.
    InformationsquelleAutor jvenema
  3. 3

    Il y a une belle plugin pour gérer cela. jQuery Gaz /anti-rebond

    • n'est-il pas jQuery dépendance de tout? Avoue - le nom de "anti-rebond" appelle cynique de rire! De toute façon, bonne trouvaille.
    • lodash a aussi papillon et anti-rebond les méthodes
    InformationsquelleAutor PetersenDidIt
  4. 2

    De Nick réponse est parfait, mais si la manipulation premier événement immédiatement est critique alors je pense que nous pouvons faire:

    $(selector).keyup(function(e){ //or another event

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

                //in case the last event matters, be sure not to miss it
                $(this).trigger("keyup"); //call again the source event
            }, 500)
        }
    }
});
    InformationsquelleAutor Huy Le
  5. 1

    J'avais l'envelopper 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 combien de fois vous vous de ping cela, vous n'aurez plus jamais de recherche plus de toutes les 500 millisecondes.

    • ne jamais passer d'une chaîne à setTimeout! eval est le mal (dans plus cas) 🙂 utiliser un anoymous fonction comme: setTimeout(function() { needsDelay = false; }, 500); à la place.
    • Je sais que eval est mal, mais je suis paresseux et mettre eval états dans mon code. J'ai besoin d'ajouter que, pour ma nazi liste. Pas plus eval.
    InformationsquelleAutor thaBadDawg