How do I debounce a function in JavaScript?

Home

Community

Collections

Find Jobs

How do I debounce a function in JavaScript?

asked 404 days ago

I have an input field where I fire an API request on every keystroke. This is causing too many network calls and poor performance. How can I debounce the function so it only fires after the user stops typing for, say, 300ms?

javascript

nodejs

api

1 Answer

Dev

• answered 403 days ago

You can create a generic debounce helper:

1CopyEditfunction debounce(fn, delay = 300) {
2  let timer;
3  return function (...args) {
4    clearTimeout(timer);
5    timer = setTimeout(() => fn.apply(this, args), delay);
6  };
7}
8

1CopyEditfunction debounce(fn, delay = 300) {
2  let timer;
3  return function (...args) {
4    clearTimeout(timer);
5    timer = setTimeout(() => fn.apply(this, args), delay);
6  };
7}
8

Usage:

1CopyEditconst onInputChange = debounce((e) => {
2  fetchData(e.target.value);
3}, 300);
4
5document.querySelector('input').addEventListener('input', onInputChange);
6

1CopyEditconst onInputChange = debounce((e) => {
2  fetchData(e.target.value);
3}, 300);
4
5document.querySelector('input').addEventListener('input', onInputChange);
6

This wraps your real handler, cancelling any pending call until the user stops typing for delay milliseconds.

Write your answer here

Top Questions

How do I implement basic pagination on a MySQL table from a Next.js API route?

What’s the best way to keep my database credentials secret in a Next.js + Express project?

How can I create a simple Next.js API route that fetches data from my MongoDB collection?

How do I debounce a function in JavaScript?

How do you design a multi-language, SEO-friendly blog using Next.js that supports real-time content updates?

Popular Tags