Back to all snippets
Library/JavaScript/Throttle Function
javascriptintermediateperformanceoptimizationtiming

How to implement Throttle Function in Javascript

Limit function execution to once per specified time interval

Quick Answer

A throttle function ensures a callback is called at most once within a given time window. Unlike debounce, it fires on the leading edge and continues to fire at regular intervals as long as the trigger keeps occurring.

Code Snippet

1function throttle(func, limit) {
2  let inThrottle;
3  return function(...args) {
4    if (!inThrottle) {
5      func.apply(this, args);
6      inThrottle = true;
7      setTimeout(() => inThrottle = false, limit);
8    }
9  };
10}

What is Throttle Function?

A throttle function ensures that a function is called at most once in a specified time period. Unlike debounce which delays execution, throttle guarantees regular execution intervals. This is essential for performance optimization when dealing with high-frequency events like scrolling, mouse movements, or repeated button clicks.

How It Works

  1. 1The function accepts a callback and a time limit in milliseconds.
  2. 2A flag tracks whether the function is currently in a throttle window.
  3. 3On the first call, the callback fires immediately and the flag is set.
  4. 4Subsequent calls within the time window are ignored.
  5. 5After the time limit expires, the flag resets and the function can fire again.

Common Use Cases

  • Scroll event handlers — update UI elements while scrolling without overwhelming the browser
  • Button click prevention — prevent multiple form submissions
  • API rate limiting — control request frequency to external services
  • Mouse movement tracking — track cursor position without performance degradation

Key Benefits

  • Guarantees consistent execution intervals
  • Prevents performance bottlenecks in event handlers
  • Reduces server load from repeated API calls
  • Maintains smooth user interactions

Common Mistakes to Avoid

  • Confusing throttle with debounce — throttle fires at intervals, debounce waits for silence.
  • Setting the limit too high, making the UI feel unresponsive.
  • Not cleaning up event listeners that use throttled functions.
  • Recreating the throttled function inside React render cycles.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more javascript examples

Frequently Asked Questions

When should I use throttle instead of debounce?

Use throttle when you need guaranteed periodic execution, such as scroll progress bars or live previews. Use debounce when you want to wait for activity to stop, such as search-as-you-type.

What is a good throttle limit for scroll events?

50–100 ms works well for most scroll-driven UI updates. Lower values feel more real-time but use more CPU.

Does throttle drop intermediate calls?

Yes. Any call that arrives while the throttle window is active is silently ignored unless you add trailing-call support.

Related Snippets

javascript
intermediate
Debounce Function
Delay function execution until after a specified time has elapsed since the last invocation
performanceoptimizationtiming
javascript
beginner
Sleep Function
Pause execution for a specified number of milliseconds using async/await
asyncutilitiestiming

About This Javascript Code Snippet

This free javascript code snippet for throttle function is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this intermediate-level example will help you implement throttle function quickly and correctly.

All snippets in the Snippetly library follow javascript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses javascript.

Tags: performance, optimization, timing  | Language: javascript  | Difficulty: intermediate  | Category: JavaScript

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets