JavaScript Throttle

Written by Swapnil RajaPublished 24 Aug 2026

Throttling limits a function to running at most once in a given time window.

Debounce waits for calls to stop; throttle guarantees a steady trickle instead.

Scrolling is the classic case: you want updates, just not hundreds per second.

Example

javascript

function throttle(fn, interval) {
  let ready = true;
  return function (...args) {
    if (!ready) return;
    ready = false;
    fn(...args);
    setTimeout(function () { ready = true; }, interval);
  };
}

let calls = 0;
const throttled = throttle(function () { calls++; }, 10);

throttled();
throttled();
throttled();

console.log(calls);

PreviousJavaScript Debounce NextJavaScript Memoization

Example

javascript

function throttle(fn, interval) {
  let ready = true;
  return function (...args) {
    if (!ready) return;
    ready = false;
    fn(...args);
    setTimeout(function () { ready = true; }, interval);
  };
}

let firstResult = null;
const throttled = throttle(function (value) { firstResult = value; }, 10);

throttled("immediate");

console.log(firstResult);

Example

javascript

function throttle(fn, interval) {
  let ready = true;
  return function (...args) {
    if (!ready) return;
    ready = false;
    fn(...args);
    setTimeout(function () { ready = true; }, interval);
  };
}

let runs = 0;
const throttled = throttle(function () { runs++; }, 10);

for (let i = 0; i < 100; i++) {
  throttled();
}

console.log(runs);

Example

javascript

function throttle(fn, interval) {
  let ready = true;
  return function (...args) {
    if (!ready) return;
    ready = false;
    fn(...args);
    setTimeout(function () { ready = true; }, interval);
  };
}

let layoutChecks = 0;
const onScroll = throttle(function () { layoutChecks++; }, 10);

for (let i = 0; i < 50; i++) {
  onScroll();
}

console.log(layoutChecks);

Example

javascript

function throttle(fn, interval) {
  let ready = true;
  return function (...args) {
    if (!ready) return;
    ready = false;
    fn(...args);
    setTimeout(function () { ready = true; }, interval);
  };
}

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

let runs = 0;
const throttled = throttle(function () { runs++; }, 5);

throttled();
throttled();

afterDelay(15, function () {
  throttled();
  console.log(runs);
});

Example

javascript

function throttle(fn, interval) {
  let ready = true;
  return function (...args) {
    if (!ready) return;
    ready = false;
    fn(...args);
    setTimeout(function () { ready = true; }, interval);
  };
}

console.log(typeof throttle(function () {}, 100));

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Throttle</title>
  <style>
    #box { height: 150px; overflow-y: scroll; border: 1px solid #ccc; }
    #content { height: 800px; }
  </style>
</head>
<body>

  <h1>Throttle</h1>

  <div id="box"><div id="content"></div></div>
  <p id="out">Scroll count: 0</p>

  <script>
    function throttle(fn, interval) {
      let ready = true;
      return function (...args) {
        if (!ready) return;
        ready = false;
        fn(...args);
        setTimeout(function () { ready = true; }, interval);
      };
    }

    let count = 0;
    const onScroll = throttle(function () {
      count++;
      document.getElementById("out").textContent = "Scroll count: " + count;
    }, 200);

    document.getElementById("box").addEventListener("scroll", onScroll);
  </script>

</body>
</html>

JavaScript Throttle

Example

How Throttle Works

Syntax

The First Call Always Runs

Example

Calls During the Interval Are Dropped

Example

Scroll Handling

Example

Running Again After the Interval

Example

Debounce or Throttle?

Example

Complete Example

Try It Yourself

Important Points

Conclusion