A calculation is based on user input, and criteria is to use keyup rather than change or blur.

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.

I found David Walsh's dbounce function, but cannot figure out how to implement it.

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

    };

};