Come implementare il rimbalzo fn in evento jupery keyup?

Question

Un calcolo è basato sull'input dell'utente e il criterio è utilizzare keyup anziché change o blur.

Il problema è che il codice si attiva ogni volta che si preme il tasto e io ho bisogno di ritardare e sparare solo una volta dopo un timeout di 500 ms. Il mio esempio qui sotto ovviamente non funziona, violino allegato.

Ho trovato la funzione dbounce di David Walsh, ma non riesco a capire come implementarla.

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

usare in questo modo: -

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