How to pass in arguments in debounce

Question

const debounce = (func) => {
    return (arg) => {
        let timeoutId;
        if (timeoutId){
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
            func(arg);
        }, 1000);
    }
}

function hello(name){
    console.log("hello " + name);
}

input.addEventListener("input", debounce(hello));

In this example how am I suppose to debounce and call the hello function with a debounce and the name "Brian".

On code line 2 return (arg) => { what is the code to pass an argument in the variable?

I get that debounce(hello); calls the debounce function but how am I suppose to pass in a variable so it gets stored in (arg)?

Intermit

Answer 1

When you return a function from a function, you have two sets of arguments: those to the outer function and those to the inner function, so the pattern is essentially

debounce(someFunction)("argument 1 to someFunction", "argument 2 to someFunction");

You can spread this over a few lines. The pattern is known as currying.

Note that your debouncer function isn't correct. It's delaying, but not batching updates because the timeoutId is local to the returned function, defeating the purpose of the closure.

Also, using ...args instead of args and making the timeout a parameter rather than hardcoding it in the function makes the debounce a bit more resuable.

Here's a minimal example of all of this:

const debounce = (func, timeout=1000) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func(...args);
    }, timeout);
  };
};

const hello = name => console.log("hello " + name);
const debouncedHello = debounce(hello);
document.querySelector("input")
  .addEventListener("input", e => debouncedHello(e.target.value));

<input value="test">

Frogman

Answer 2

VanillaJS solution.

function debounce(func, timeout = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, timeout);
  };
}

const updateQuantityDebounce = debounce((a,b) => updateNewValue(a,b));

function updateNewValue(id, quantity) {
  console.log({ id, quantity }); // do network requests here.
}

To use it , suppose from inside a click eventlistener

   function fn() {
        updateQuantityDebounce(id, newValue)
    }

Chronicle