如何将防抖函数应用于jQuery的keyup事件？

Question

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

问题在于代码会在每次按键时触发，我需要它延迟并在500ms超时后只触发一次。下面的示例显然不起作用，附上了fiddle链接。

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

jsFiddle

HTML：

<input type="text" />
<input type="text" id="n2" class="num" value="17" disabled />
<input type="text" id="n3" class="num" value="32" disabled />

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

- crashwap

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

Fiddle

- squiroid

---

很棒，使用下划线的_.debounce()函数对我非常有效。 - nnyby

根据OP提供的去抖函数，所描述的工作与其相符。 - bknights

_.debounce()函数对我也有效。非常感谢@nnyby和squiroid。 - Santosh Singh