Debounce function still executes the same number of times

Question

I have a function that is supposed to debounce another function so that you have to wait 500ms before the function supposedly re-executes. The problem is, I think the function re-executes the same number of times (many times), just 500ms later, because there is the same number of console logs in my example below.

I have tried to build a simple example to demonstrate this

let debounce = (func, wait) => {
  let timeout;

  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

let test = () => console.log('test');
let debouncedTest = debounce(test, 500);

let inputField = document.getElementById('test')
inputField.addEventListener("input", debouncedTest);

<input type='text' id='test' />

So to clarify, what should happen is if you type, for example, 'abc' into the input field all in under 500ms, it should only execute once (500ms after the last type), but instead it seems to execute 3 times.

How can I get this to only run once after the 500ms delay rather than the number of times you type into the box? I assume there is literally no point in using a debounce function if it just executes the same number of times anyway as presumably it would not improve performance at all. Thanks for any help here.

Sounds like you're confusing `debounce` with `throttle` see: [Difference Between throttling and debouncing a function](https://stackoverflow.com/questions/25991367/difference-between-throttling-and-debouncing-a-function) — pilchard, Nov 10 '22 at 22:34
It seems to work for me. I type `a` several times quickly, and it only printed `test` once for all of them at the end. — Barmar, Nov 10 '22 at 22:37
You shouldn't use both `onchange=` and `addEventListener`. Note also that the `change` event doesn't fire while you're typing. You have to leave the input field. That's why I type Return between each letter. — Barmar, Nov 10 '22 at 22:40
"*the function re-executes the same number of times*" - no it doesn't. Try typing really quickly, it'll only executes once at the end. — Bergi, Nov 10 '22 at 22:41

score 0 · Accepted Answer · answered Nov 10 '22 at 22:41

I think the debounce is working just fine.

Usually debounce is added using input event though. You also have the event added inline and using addEventListener, which is unnecessary.

let debounce = (func, wait) => {
  let timeout;

  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

let test = () => console.log('test');
let debouncedTest = debounce(test, 500);

let inputField = document.getElementById('test')
inputField.addEventListener("input", debouncedTest);

<input type='text' id='test' />

Sorry I just removed that part from the question for better demonstration that the OP's assumption is wrong… Your answer "*debounce is working just fine.*" is still correct though — Bergi, Nov 10 '22 at 22:42

Debounce function still executes the same number of times

1 Answers1