DEV Community

Cover image for Throttling & Debouncing in JavaScript: A Beginner's Guide
Ali Samir
Ali Samir

Posted on

1

Throttling & Debouncing in JavaScript: A Beginner's Guide

When using JavaScript, excessive event triggers can slow down your application. For instance, a user resizing the browser window or typing in a search bar can cause events to fire repeatedly in a short time, impacting app performance.

This is where throttling and debouncing come to the rescue. They help you manage how often your functions are called when dealing with events that fire too often.


📌 What is Throttling?

Throttling limits how often a function can be executed. Even if an event happens repeatedly, a throttled function will only run at most once every specified time interval.

Example:

Imagine you're at a concert, and you're taking photos. But you decide to only take one picture every 5 minutes (no matter how exciting the performance gets). That's like throttling. No matter how many photo-worthy moments happen, you'll stick to your rule of one photo every 5 minutes.

In JavaScript, this could be applied when you want to track how often the user scrolls down a page, but you don’t want the function to be triggered every millisecond. With throttling, you control how frequently that function is executed.

Code Example:

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}
Enter fullscreen mode Exit fullscreen mode

In this example, the handleScroll function will only run once every 2 seconds (2000 milliseconds) no matter how fast or frequently the user scrolls.


📌 What is Debouncing?

Debouncing ensures that a function is only called after a certain period of inactivity. If the event keeps firing, the function will keep resetting the timer and only trigger after the event stops.

Example:

Imagine you're in a group chat, and you're typing a message. You don't want to send a notification to your friends every time you press a key. Instead, you want to wait until you've stopped typing for a few seconds before sending a "typing..." notification. That’s debouncing — only sending a notification after a pause in typing.

In JavaScript, debouncing is often used when users type into a search box. Instead of sending a search query after each keystroke, you can wait until the user stops typing for a moment before performing the search.

Code Example:

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}
Enter fullscreen mode Exit fullscreen mode

In this example, the handleInput function will only run after the user has stopped typing for 500 milliseconds.



📌 When to Use Throttling or Debouncing?

⚡️ Use Throttling when you want to control how often a function is called over time. Good for events like:

=> Scrolling
=> Resizing the window
=> Mouse movements

⚡️ Use Debouncing when you want to ensure that a function is only called after an event has finished firing. Good for events like:

=> Typing in a search bar
=> Form submissions
=> Resizing the window (for actions like layout adjustments)


Conclusion ✅

Throttling and debouncing are great techniques for improving the performance and responsiveness of your JavaScript applications.

They help you manage how often functions are executed, preventing your app from being overwhelmed by too many events.

By understanding when and how to use them, you can keep your code running smoothly even in the busiest of apps!


Happy Coding! 🔥

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay