Javascript Throttling & Debouncing 🚀
Tags: javascript, webdev, react, typescript
Published: 2023-09-26 06:25:05


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.

```javascript
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.

```javascript
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.

```javascript
// 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!

```javascript
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.

```javascript
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!

```javascript
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! 🐌

```javascript
// 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.

```javascript
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.

---