Why does this debounce never fire as expected?

programming web dev
1

Consider this snippet.

function debounce(fn, delay) {
  let id;
  return (...args) => {
    clearTimeout(id);
    setTimeout(() => fn(...args), delay);
  };
}

const log = debounce(console.log, 300);
log('first');
log('second');

Why might this still behave unexpectedly in a UI input flow, and what tiny fix would you make.

Quelly

2

It keeps scheduling new timers because you never store the handle, so in an input handler older callbacks can still fire out of order.

Ellen