Debounce function running multiple time after timeout complete

Question

I am trying to run a debounce function that take the input of "SaveValue" which would take the value of the input and save that some where. Problem is it runs the "SaveValue" function multiple time one the debounce timeout in complete. I have many of these input and don't really want to be putting a bunch of onEventListeners through out the code. What is the best way to make this work.

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

function SaveValue(value1, value2, value3){
    console.log(`Save value of ${value1} here -> ${value2} on field -> ${value3}`);
}

user_10417034 · Answer

I have done a little testing on your code, and it seems the way the debounce function is being called in the onkeyup handler, is creating a new instance of the function call (and subsequently a new timer) for every event. This would result in the multiple calls.

Try changing it to something like this:

const dSaveValue = debounce(() => { SaveValue("value", 'savehere', 'onhere')}, 1000, false)

Lloyd

user_11522342 · Answer

After playing around with this I have figured a way to make this re-useable. Thankyou Lloyd for clearing this up for me. Works great.

const dSaveValue = debounce((value1, value2, value3) => { SaveValue(value1, value2, value3)}, 1000, false)

Debounce function running multiple time after timeout complete

2 Answers