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();
    }
  };
}

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);
  };
}

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! 🔥