title: How to implement debounce fn into jQuery keyup event?
body: <p>A calculation is based on user input, and criteria is to use <code>keyup</code> rather than <code>change</code> or <code>blur</code>.</p>
  
  <p>The problem is that the code fires on every keystroke, and I need it to delay and fire only once after a 500ms timeout. My example below obviously doesn't work, fiddle attached.</p>
  
  <p>I found David Walsh's <code>dbounce</code> function, but cannot figure out how to implement it.</p>
  
  <p><a href="http://jsfiddle.net/kkoosvro/" rel="noreferrer">jsFiddle</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;input type="text" /&gt;
  &lt;input type="text" id="n2" class="num" value="17" disabled /&gt;
  &lt;input type="text" id="n3" class="num" value="32" disabled /&gt;
  </code></pre>
  
  <p><strong>javascript/jQuery:</strong></p>
  
  <pre><code>$('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 &amp;&amp; !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
      };
  };
  </code></pre>