Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement debounce fn into jQuery keyup event?

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);
    };
};
like image 558
crashwap Avatar asked Mar 09 '15 17:03

crashwap


People also ask

What is jQuery Debounce?

Using jQuery throttle / debounce, you can pass a delay and function to $. debounce to get a new function, that when called repetitively, executes the original function just once per "bunch" of calls. This can be especially useful for rate limiting execution of handlers on events that will trigger AJAX requests.

What is Keyup and Keydown in jQuery?

jQuery supports 3 types of keyboard events and which we are : keyup(): Event fired when a key is released on the keyboard. keydown(): Event fired when a key is pressed on the keyboard. keypress:() Event fired when a key is pressed on the keyboard.

How do I delay a Keyup event?

In this article, we will see how to use keyup with a delay in jQuery. There are two ways to achieve the same: Approach 1: Using the keypress(), fadeIn(), delay() and fadeOut() methods in the jQuery library and clearTimeout() and setTimeout() methods in native JavaScript.


1 Answers

Use it like this:-

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

like image 50
squiroid Avatar answered Oct 18 '22 00:10

squiroid