How JavaScript’s Debounce() Works

Debouncing is a technique in programming that limits the rate at which a function can be called. It is often used to improve the performance and user experience of websites and applications by reducing the number of unnecessary calls to a function. For example, you might use debouncing to prevent a search function from being called on every keystroke, but instead only call it once the user has stopped typing for a certain period of time.

Here’s a step-by-step guide on how to implement debouncing in JavaScript:

1. Define a function that you want to debounce. This function should contain the logic that you want to limit the rate of execution for. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

function search(query) {
  // Perform search with the provided query
}

[/dm_code_snippet]

2. Create a debounce function that takes the function to debounce as an argument, as well as a delay time in milliseconds. The debounce function should return a new function that, when called, will delay the execution of the original function by the specified time.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

function debounce(func, delay) {
  let timeout;

  return function() {
    const context = this;
    const args = arguments;

    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

[/dm_code_snippet]

3. Use the debounce function to create a debounced version of your original function. You can specify the delay time as an argument to the debounce function. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const debouncedSearch = debounce(search, 1000);

[/dm_code_snippet]

This creates a new function called debouncedSearch that will only execute the search function once per second, regardless of how many times it is called within that time period.

4. Call the debounced function as needed in your code. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

input.addEventListener('keyup', debouncedSearch);

[/dm_code_snippet]

This will call the debouncedSearch function every time the keyup event is fired on the input element, but the search function will only be called once per second.

That’s it! You have now implemented debouncing in JavaScript. Here’s the complete code:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

function search(query) {
  // Perform search with the provided query
}

function debounce(func, delay) {
  let timeout;

  return function() {
    const context = this;
    const args = arguments;

    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

const debouncedSearch = debounce(search, 1000);

input.addEventListener('keyup', debouncedSearch);

[/dm_code_snippet]