Javascript Throttling & Debouncing 🚀

Why Throttle or Debounce? 🤔
Welcome back, code ninjas! 🥷 Ever faced a situation where your application starts acting like a toddler on a sugar rush? Yep, over-excited and out of control! Well, that's probably because it's choking on too many events. Enter throttling and debouncing, your new BFFs! 😎

1️⃣ What Even is Throttling? 🐢

Throttling is like that friend who tells you to chill when you're hyperventilating. It limits how many times a function can be executed over a given period.

function throttle(func, delay) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall < delay) return;
    lastCall = now;
    return func.apply(this, arguments);
  };
}

Try this with a scrolling event and see your console relaxing instead of flooding!

2️⃣ Debouncing: The Thoughtful One 🤫

Debouncing is the thinker in your group. It doesn't jump into action; it waits for the right moment. This is great for search box suggestions, for instance.

function debounce(func, delay) {
  let debounceTimer;
  return function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

Try this out when you want to wait for the user to stop typing before making an API call.

3️⃣ Throttling vs Debouncing: The Eternal Debate 🥊

Here's where we throw them in the ring together. Throttling is like a metronome; it's rhythmic. Debouncing is the "freeze, let me think" kind. Use throttling for real-time stuff and debouncing for when waiting is okay.
Example: Imagine a real-time search feature on a website. With throttling, you get updates as you type, but not every keystroke triggers an API call. With debouncing, the search won't start until you've stopped typing for a moment.

// Throttling for real-time feel
document.querySelector("#realTimeSearch").addEventListener("input", throttle(function() {
  console.log("Throttled real-time search!");
}, 500));

// Debouncing for thoughtful responses
document.querySelector("#thoughtfulSearch").addEventListener("input", debounce(function() {
  console.log("Debounced search!");
}, 500));
choices.

4️⃣ Use Cases: Throttling in the Wild 🌲

Scroll events, mouse move events, or any continuous event can benefit from throttling. Your CPU will thank you!

window.addEventListener("scroll", throttle(function() {
  console.log("Throttled scroll!");
}, 200));

5️⃣ Use Cases: Debouncing For The Win 🏆

Great for text input or combo boxes where you don't want to start searching or filtering until the user has finished typing.

const searchBox = document.querySelector("#search");
searchBox.addEventListener("keyup", debounce(function() {
  console.log("Debounced search!");
}, 300));

6️⃣ How to Implement Using Lodash 📚

Oh, you're lazy, huh? Well, good news! Libraries like Lodash have these features built in. Just import and go!

import { throttle, debounce } from 'lodash';

// Throttle button click
document.querySelector("#myButton").addEventListener("click", throttle(function() {
  console.log("Button clicked, but throttled!");
}, 1000));

// Debounce autocomplete
const autoCompleteBox = document.querySelector("#autoComplete");
autoCompleteBox.addEventListener("keyup", debounce(function() {
  console.log("Debounced autocomplete search!");
}, 300));

// Use like a pro

7️⃣ Gotchas and Mistakes to Avoid 🚫

Be careful when applying these techniques. Overdoing it may lead to sluggish behavior, and nobody likes a slowpoke! 🐌

// Don't throttle or debounce EVERYTHING!

8️⃣ The Future: RequestAnimationFrame 🎥

The requestAnimationFrame method gives you more control and can be more efficient than both throttling and debouncing for certain tasks like animations.

function animate() {
  console.log("Animating!");
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Conclusion: Are You a Throttling and Debouncing Ninja Yet? 🤺

You've just had a crash course in throttling and debouncing, tools that can significantly optimize your JS performance. Don't forget to leave a comment with your own tips or questions.