Подтвердить что ты не робот

Как реализовать debounce fn в jQuery keyup event?

Расчет основан на пользовательском вводе, а критерием является использование keyup, а не change или blur.

Проблема в том, что код срабатывает при каждом нажатии клавиши, и мне нужно, чтобы он задерживался и срабатывал только один раз после таймаута 500 мс. Мой пример ниже явно не работает, скрипка прилагается.

Я нашел функцию Дэвида Уолша dbounce, но не могу понять, как ее реализовать.

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);
    };
};
4b9b3361

Ответ 1

Используйте его так: -

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