retard sur jQuery keyup

Question

Je suis en train de mettre en œuvre this answer dans mon propre code:

$(document).ready(function() { 

    $('#qty').delayKeyup(function() { 
     var qty = $(this).val(); 
     $(this).val(Math.round(qty/10) * 10); 
    }, 1000); 

}); 

(function ($) { 
    $.fn.delayKeyup = function(callback, ms){ 
     var timer = 0; 
     $(this).keyup(function(){ 
      clearTimeout (timer); 
      timer = setTimeout(callback, ms); 
     }); 
     return $(this); 
    }; 
})(jQuery); 

mais pas de changement de la valeur d'entrée se produit. Si je supprime la fonction delayKeyup le changement fonctionne bien mais évidemment pas avec le délai. Qu'est-ce que je rate?

Answer 1

Vous devez vous assurer que la fonction de gestionnaire est appelé avec la bonne valeur this:

var timer = 0, elem = this; 
    $(this).keyup(function(){ 
     clearTimeout (timer); 
     timer = setTimeout(callback.bind(elem), ms); 
    }); 

Votre rappel est écrit à attendre à ce que this sera l'élément DOM impliqué. De plus, il est recommandé de vous assurer que vos méthodes add-on jQuery se comportent comme de bons citoyens jQuery. Dans un cas comme celui-ci, vous devriez utiliser .each() au cas où le sélecteur pour « delayKeyup » fait référence à plusieurs éléments:

(function ($) { 
    $.fn.delayKeyup = function(callback, ms){ 
     return this.each(function() { // $(this) not necessary for a jQuery add-on 
      var timer = 0, elem = this; 
      $(this).keyup(function(){ 
      clearTimeout (timer); 
      timer = setTimeout(callback.bind(elem), ms); 
      }); 
     }); 
    }; 
})(jQuery); 

Tous les navigateurs prennent en charge .bind(), mais heureusement, dans ce cas, il y a une alternative très simple qui fonctionne partout :

(function ($) { 
    $.fn.delayKeyup = function(callback, ms){ 
     return this.each(function() { 
      var timer = 0, elem = this; 
      $(this).keyup(function(){ 
      clearTimeout (timer); 
      timer = setTimeout(function() { callback.call(elem); }, ms); 
      }); 
     }); 
    }; 
})(jQuery);