Javascript 如何在jQueryKeyUp事件中实现debounce fn?
计算基于用户输入,标准是使用Javascript 如何在jQueryKeyUp事件中实现debounce fn?,javascript,jquery,Javascript,Jquery,计算基于用户输入,标准是使用keyup而不是change或blur 问题是每次击键都会触发代码,我需要它延迟,并在500毫秒超时后只触发一次。我下面的例子显然不起作用,附带提琴 我找到了David Walsh的dbounce函数,但不知道如何实现它 HTML: <input type="text" /> <input type="text" id="n2" class="num" value="17" disabled /> <input type="text"
keyup
而不是change
或blur
问题是每次击键都会触发代码,我需要它延迟,并在500毫秒超时后只触发一次。我下面的例子显然不起作用,附带提琴
我找到了David Walsh的dbounce
函数,但不知道如何实现它
HTML:
<input type="text" />
<input type="text" id="n2" class="num" value="17" disabled />
<input type="text" id="n3" class="num" value="32" disabled />
$('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);
};
};
像这样使用它:-
$('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));
太好了,下划线的
\uu.debounce()
函数对我很有效。使用OP提供的debounce函数可按说明工作。