# Implement Debounce and Throttle in JavaScript

When building interactive web applications, performance often becomes a concern—especially when dealing with events that fire frequently, like scrolling, resizing, or key presses. Without control, these event handlers can overwhelm the browser and APIs. This is where **debounce** and **throttle** come in: two powerful techniques to control how often a function executes.

## Why Use Debounce and Throttle

* **Debounce:** Ensures a function only runs *after* a specified delay from the last time it was called. Ideal for search boxes, window resizing, or form validation, where you don't want to query the server on every keystroke—only after the user stops typing.
    
* **Throttle:** Ensures a function runs at most once in a set time interval. Perfect for scroll and resize events, where you want smooth updates without overwhelming the browser or APIs.
    

## Debounce Implementation

```javascript
function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const test = (text) => console.log(text);
const debounceTest = debounce(test, 10000);

debounceTest("Hello, World!");
// this call cancles the first timer
// "Hello, World! 2" is logged after 15 seconds
setTimeout(() => debounceTest("Hello, World! 2"), 5000);
```

## Throttle Implementation

```javascript
function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

const test = (text) => console.log(text);
const throttledTest = throttle(test, 10000);

//only the first one is logged
throttledTest("Hello, World! One and only.");
throttledTest("Hello, World! 2");
throttledTest("Hello, World! 3");

// call again after the throttle time
setTimeout(() => {
  //the first one is logged
  throttledTest("Hello, World! Again");
  throttledTest("Hello, World! 2");
}, 15000);
```