How to debounce input with setTimeout()

Use a debounce when an input fires too often and you only want to run work after the user pauses.

Recipe

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

const runSearch = debounce((value) => {
  console.log("Search:", value);
}, 250);

input.addEventListener("input", (event) => {
  runSearch(event.target.value.trim());
});

Each new keystroke cancels the previous timer and starts a new one, so the search only runs after typing settles.

See Also

• Promise
• events module