задержка JQuery на KeyUp

Question

Я пытаюсь реализовать this answer в моем собственном коде:

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

, но не изменение величины входного не происходит. Если я удалю функцию delayKeyup, то смена работает нормально, но явно не с задержкой. Что мне не хватает?

Answer 1

Вы должны убедиться, что функция обработчик вызывается с соответствующим значением this:

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

Ваш обратный вызов записывается ожидать, что this будет элемент DOM участвует.

Кроме того, это хорошая практика, чтобы убедиться, что ваши методы добавления jQuery ведут себя как хорошие граждане jQuery. В таком случае, как это, вы должны использовать .each() в случае выбора для «delayKeyup» относится к нескольким элементам:

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

Не все браузеры поддерживают .bind(), но, к счастью, в этом случае есть очень простая альтернатива, которая работает везде :

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