Debounce & Throttle

1. Debounce Concept

Debouncing ensures that a function is only called after a certain amount of time has passed without it being called again.

Real World Examples:

Search input suggestions
Window resize events
Auto-save functionality
Form validation on typing

When to Use:

When you want to wait until user stops typing
For expensive operations triggered by frequent events
When you need to reduce API calls

Basic Debounce Implementation

JavaScript Editor

Debounce with Immediate Option

Sometimes you want to execute immediately on the first call, then debounce subsequent calls.

JavaScript Editor

2. Throttle Concept

Throttling ensures that a function is called at most once in a specified time period.

Real World Examples:

Scroll event handlers
Mouse move events
Window resize with complex calculations
Game button presses

When to Use:

When you need to limit the rate of execution
For continuous events like scrolling/resizing
When you want regular updates but not too frequent

Basic Throttle Implementation

JavaScript Editor

Throttle with Leading and Trailing Options

JavaScript Editor

// Advanced Throttle Implementation
function throttle(func, limit, options = {}) {
  const { leading = true, trailing = true } = options;
  let timeoutId;
  let lastCallTime = 0;
  let lastArgs;
  
  return function(...args) {
    const now = Date.now();
    lastArgs = args;
    
    if (!lastCallTime && !leading) {
      lastCallTime = now;
    }
    
    const remaining = limit - (now - lastCallTime);
    
    if (remaining <= 0 || remaining > limit) {
      if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
      }
      
      lastCallTime = now;
      func.apply(this, args);
    } else if (trailing && !timeoutId) {
      timeoutId = setTimeout(() => {
        lastCallTime = leading ? Date.now() : 0;
        timeoutId = null;
        func.apply(this, lastArgs);
      }, remaining);
    }
  };
}

// Usage examples
function trackMouseMove(event) {
  console.log(`Mouse position: ${event.x}, ${event.y} at ${Date.now()}`);
}

const throttledMouseMove = throttle(trackMouseMove, 100, {
  leading: true,
  trailing: true
});

// Simulate mouse events
console.log('Simulating mouse move events:');
throttledMouseMove({ x: 10, y: 20 });
setTimeout(() => throttledMouseMove({ x: 15, y: 25 }), 50);
setTimeout(() => throttledMouseMove({ x: 20, y: 30 }), 80);
setTimeout(() => throttledMouseMove({ x: 25, y: 35 }), 150);

3. Comparison & Use Cases

Feature	Debounce	Throttle
Execution Timing	After the event stops for X time	At most once every X time
Use Case Example	Search on typing	Scroll event handling
Response Time	Delayed response	Immediate first response
Event Frequency	Reduces to single call	Reduces frequency
Memory Usage	Stores timeout	Stores last execution time

4. Practical Examples

Example 1: Search Input with API Call

JavaScript Editor

// Search Input with Debounce
class SearchComponent {
  constructor() {
    this.searchInput = document.createElement('input');
    this.searchInput.type = 'text';
    this.searchInput.placeholder = 'Search...';
    
    // Debounce the search function (500ms delay)
    this.debouncedSearch = this.debounce(this.performSearch, 500);
    
    this.searchInput.addEventListener('input', (event) => {
      this.debouncedSearch(event.target.value);
    });
  }

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

async performSearch(query) {
    if (!query.trim()) {
      console.log('Empty query, skipping API call');
      return;
    }
    
    console.log(`Making API call for: "${query}"`);
    
    // Simulate API call
    try {
      // In real app: await fetch(`/api/search?q=${query}`);
      await new Promise(resolve => setTimeout(resolve, 300));
      console.log(`Results for "${query}" received`);
    } catch (error) {
      console.error('Search failed:', error);
    }
  }

simulateTyping() {
    console.log('Simulating user typing "hello world":');
    const text = 'hello world';
    let currentText = '';
    
    for (let char of text) {
      currentText += char;
      this.searchInput.value = currentText;
      const event = new Event('input');
      this.searchInput.dispatchEvent(event);
    }
  }
}

// Test the search component
const search = new SearchComponent();
search.simulateTyping();

Example 2: Infinite Scroll with Throttle

JavaScript Editor

// Infinite Scroll with Throttle
class InfiniteScroll {
  constructor() {
    this.isLoading = false;
    this.page = 1;
    
    // Throttle the scroll handler
    this.throttledScroll = this.throttle(this.handleScroll, 200);
    
    window.addEventListener('scroll', () => this.throttledScroll());
  }

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

handleScroll() {
    const scrollPosition = window.innerHeight + window.scrollY;
    const documentHeight = document.documentElement.offsetHeight;
    const threshold = 100; // Load when 100px from bottom
    
    if (documentHeight - scrollPosition < threshold && !this.isLoading) {
      this.loadMore();
    }
  }

async loadMore() {
    this.isLoading = true;
    console.log(`Loading page ${this.page}...`);
    
    // Simulate API call
    try {
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log(`Page ${this.page} loaded successfully`);
      this.page++;
    } catch (error) {
      console.error('Failed to load more content:', error);
    } finally {
      this.isLoading = false;
    }
  }

simulateScroll() {
    console.log('Simulating scroll events:');
    // Simulate multiple rapid scroll events
    for (let i = 0; i < 10; i++) {
      setTimeout(() => {
        window.dispatchEvent(new Event('scroll'));
        console.log(`Scroll event ${i + 1} triggered`);
      }, i * 50);
    }
  }
}

// Test infinite scroll
const scroll = new InfiniteScroll();
scroll.simulateScroll();

Example 3: Resize Handler with Both

JavaScript Editor

// Window Resize with Debounce and Throttle
class ResizeHandler {
  constructor() {
    this.resizeCount = 0;
    this.layoutChangeCount = 0;
    
    // Throttle for expensive operations
    this.throttledLayout = this.throttle(this.calculateLayout, 100);
    
    // Debounce for final resize handling
    this.debouncedResize = this.debounce(this.finalizeResize, 250);
    
    window.addEventListener('resize', () => {
      this.resizeCount++;
      console.log(`Resize event ${this.resizeCount}`);
      
      // Update UI immediately (throttled)
      this.throttledLayout();
      
      // Handle final resize after user stops
      this.debouncedResize();
    });
  }

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

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

calculateLayout() {
    this.layoutChangeCount++;
    console.log(`Layout calculated ${this.layoutChangeCount} times`);
    // In real app: Update CSS, reposition elements, etc.
  }

finalizeResize() {
    console.log('Final resize handling - window size stabilized');
    // In real app: Save state, trigger analytics, etc.
  }

simulateResize() {
    console.log('Simulating window resize:');
    for (let i = 0; i < 5; i++) {
      setTimeout(() => {
        window.dispatchEvent(new Event('resize'));
      }, i * 100);
    }
  }
}

// Test resize handler
const resizeHandler = new ResizeHandler();
resizeHandler.simulateResize();

5. Advanced Implementation

Cancelable Debounce

JavaScript Editor

// Cancelable Debounce
function cancelableDebounce(func, delay) {
  let timeoutId;
  
  const debounced = function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
  
  debounced.cancel = function() {
    clearTimeout(timeoutId);
    timeoutId = null;
  };
  
  debounced.flush = function() {
    if (timeoutId) {
      clearTimeout(timeoutId);
      func.apply(this, arguments);
      timeoutId = null;
    }
  };
  
  return debounced;
}

// Usage
function saveData(data) {
  console.log(`Data saved: ${JSON.stringify(data)}`);
}

const debouncedSave = cancelableDebounce(saveData, 1000);

// Test
debouncedSave({ user: 'John', score: 100 });
setTimeout(() => debouncedSave({ user: 'John', score: 150 }), 500);

// Cancel before execution
setTimeout(() => {
  console.log('Cancelling debounced save...');
  debouncedSave.cancel();
}, 1200);

// Flush to execute immediately
setTimeout(() => {
  console.log('Flushing debounced save...');
  debouncedSave.flush({ user: 'Jane', score: 200 });
}, 1500);

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

1. Debounce Concept

Real World Examples:

When to Use:

Basic Debounce Implementation

Debounce with Immediate Option

2. Throttle Concept

Real World Examples:

When to Use:

Basic Throttle Implementation

Throttle with Leading and Trailing Options

3. Comparison & Use Cases

4. Practical Examples

Example 1: Search Input with API Call

Example 2: Infinite Scroll with Throttle

Example 3: Resize Handler with Both

5. Advanced Implementation

Cancelable Debounce

Best Practices:

Follow Us

Our Tools

Our Company

Special Tools