Làm thế nào để triển khai debn fn vào sự kiện keyup của jQuery?

Question

Tính toán dựa trên đầu vào của người dùng và tiêu chí là sử dụng keyup thay vì change hoặc blur.

Sự cố là mã kích hoạt trên mọi lần nhấn phím và tôi cần nó để trì hoãn và chỉ kích hoạt sau một lần hết thời gian 500ms. Ví dụ của tôi dưới đây rõ ràng là không hoạt động, fiddle đính kèm.

Tôi đã tìm thấy chức năng dbounce của David Walsh, nhưng không thể tìm ra cách triển khai.

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

Answer 1

Sử dụng nó như thế này: -

$('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