Wie man Debounce Fn in jQuery Keyup-Ereignis implementieren?

Question

Eine Berechnung basiert auf Benutzereingaben, und die Kriterien lauten keyup anstelle von oder blur.

Das Problem ist, dass der Code bei jedem Tastendruck ausgelöst wird, und ich brauche es zu verzögern und nur einmal nach 500ms Timeout ausgelöst. Mein Beispiel unten funktioniert offensichtlich nicht, Geige angefügt.

Ich fand David Walsh dbounce Funktion, aber kann nicht herausfinden, wie man es implementiert.

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

es wie folgt verwenden: -

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