{"id":119,"date":"2026-10-07T07:56:18","date_gmt":"2026-10-07T07:56:18","guid":{"rendered":"https:\/\/webdevpuneet.com\/blog\/?p=119"},"modified":"2026-10-07T07:56:21","modified_gmt":"2026-10-07T07:56:21","slug":"javascript-debounce-vs-throttle-when-should-you-use-each","status":"publish","type":"post","link":"https:\/\/webdevpuneet.com\/blog\/javascript-debounce-vs-throttle-when-should-you-use-each\/","title":{"rendered":"JavaScript Debounce vs Throttle: When Should You Use Each?"},"content":{"rendered":"

<\/p>\n\n\n

Both exist to solve the same underlying problem \u2014 a browser event that fires far more often than your code actually needs to react to it. A user typing into a search box fires an input<\/code> event on every keystroke. A user scrolling or dragging fires dozens of events a second. Running an API call, a layout recalculation, or a re-render on every single one of those is wasteful at best and janky at worst. Debounce<\/strong> and throttle<\/strong> both slow that flood down \u2014 the real question isn’t “which one is more efficient,” it’s what shape of behavior you actually want<\/strong>: debounce says “wait until things go quiet, then do it once.” Throttle says “keep doing it, but never more often than this.” Once that distinction clicks, most “which one do I reach for” questions answer themselves.<\/p>\n\n\n\n

The 5 demos below are all real, running JavaScript \u2014 type, scroll, move your mouse \u2014 so you can watch each technique’s actual firing pattern instead of reading about it secondhand. One demo in particular puts both side by side on the exact same stream of events, so the difference isn’t a claim, it’s something you can watch happen in real time.<\/p>\n\n\n\n

Every embed also has a Fork & Edit<\/strong> button that opens the exact snippet, already running, in My Code<\/a> \u2014 webdevpuneet’s free in-browser editor. Change a delay from 300ms to 1000ms on a real debounce and watch what changes \u2014 that’s a faster way to build real intuition than any explanation.<\/p>\n\n\n\n

The one-sentence rule<\/h2>\n\n\n\n
function debounce(fn, delay) {\n  let timer;\n  return (...args) => {\n    clearTimeout(timer);               \/\/ every call cancels the last wait\n    timer = setTimeout(() => fn(...args), delay);\n  };\n}\n\nfunction throttle(fn, limit) {\n  let inThrottle = false;\n  return (...args) => {\n    if (!inThrottle) {\n      fn(...args);                     \/\/ runs immediately, then goes quiet\n      inThrottle = true;\n      setTimeout(() => (inThrottle = false), limit);\n    }\n  };\n}<\/code><\/pre>\n\n\n\n
Debounce<\/strong> resets a timer on every call and only ever runs your function once that timer finally survives uninterrupted \u2014 so a burst of 50 calls in a row collapses into exactly 1, and it fires after<\/em> the burst ends. Throttle<\/strong> runs your function immediately on the first call, then ignores every call that follows until a fixed amount of time has passed \u2014 so the same burst of 50 calls produces several evenly-spaced runs during<\/em> the burst, not one run after it. Same goal (fewer runs), opposite shape (fires at the end vs. fires steadily throughout).<\/p>\n\n\n\n
1. Debounced Search Box<\/h2>\n\n\n\n
Type in the box below. With debounce on, a fake “API call” fires only once you pause typing for 500ms \u2014 turn it off and a call fires on every keystroke instead.<\/p>\n\n\n\n