如何将debounce fn实现到jQuery keyup事件中？

计算基于用户输入，标准是使用keyup而不是change或blur 。

问题是代码在每次击键时触发，我需要它在500ms超时后才延迟和触发一次。 我下面的例子显然不起作用，小提琴附件。

我找到了David Walsh的dbounce函数，但无法弄清楚如何实现它。

的jsfiddle

HTML：

使用Javascript / jQuery的：

 $('input').keyup(function(){ var $this=$(this); setTimeout(function(){ var n1 = $this.val(); var n2 = $('#n2').val(); var n3 = $('#n3').val(); var calc = n1 * n2 * n3; alert(calc); },500); }); //http://davidwalsh.name/javascript-debounce-function function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; 

Answer 1

像这样使用它： –

 $('input').keyup(debounce(function(){ var $this=$(this); //alert( $this.val() ); var n1 = $this.val(); var n2 = $('#n2').val(); var n3 = $('#n3').val(); var calc = n1 * n2 * n3; alert(calc); },500)); 

小提琴