JavaScript Debounce

Written by Swapnil RajaPublished 24 Aug 2026

Debouncing delays a function until the calls have stopped for a while.

Typing in a search box can fire an event on every keystroke.

Debouncing waits until typing pauses before doing the expensive work.

Example

javascript

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

let calls = 0;
const debounced = debounce(function () { calls++; }, 10);

debounced();
debounced();
debounced();

console.log(calls);

PreviousJavaScript Performance Basics NextJavaScript Throttle

Example

javascript

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

const received = [];
const debounced = debounce(function (value) { received.push(value); }, 10);

debounced("a");
debounced("b");
debounced("c");

console.log(received.length);

Example

javascript

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

function afterDelay(ms, callback) {
  setTimeout(callback, ms);
}

let received = null;
const debounced = debounce(function (value) { received = value; }, 5);

debounced("first");
debounced("final");

afterDelay(20, function () {
  console.log(received);
});

Example

javascript

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

let searchCount = 0;
const search = debounce(function (query) { searchCount++; }, 10);

search("j");
search("ja");
search("jav");
search("java");

console.log(searchCount);

Example

javascript

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

let layoutRuns = 0;
const recalculateLayout = debounce(function () { layoutRuns++; }, 10);

for (let i = 0; i < 20; i++) {
  recalculateLayout();
}

console.log(layoutRuns);

Example

javascript

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

function afterDelay(ms, callback) {
  setTimeout(callback, ms);
}

let lastQuery = null;
const search = debounce(function (query) { lastQuery = query; }, 5);

search("hello world");

afterDelay(20, function () {
  console.log(lastQuery);
});

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Debounce</title>
</head>
<body>

  <h1>Debounce</h1>

  <input id="search" placeholder="Type to search">
  <p id="out">Waiting...</p>

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

    const runSearch = debounce(function (value) {
      document.getElementById("out").textContent = "Searched for: " + value;
    }, 300);

    document.getElementById("search").addEventListener("input", function (event) {
      runSearch(event.target.value);
    });
  </script>

</body>
</html>

JavaScript Debounce

Example

How Debounce Works

Syntax

Only the Last Call Survives

Example

Waiting for It to Fire

Example

Search Input

Example

Window Resize

Example

Passing Arguments Through

Example

Complete Example

Try It Yourself

Important Points

Conclusion