Optimizing High-Frequency Event Handling with Debounce and Throttle

Problem Description
In front-end development, we often need to handle high-frequency events such as window scrolling (scroll), input field typing (input), and mouse movement (mousemove). If the callback functions for these events involve complex calculations or DOM operations, frequent execution can lead to page lag or even crashes. Debounce and Throttle are two commonly used optimization techniques to control the execution frequency of functions and improve performance.

Solution Process

1. Understanding the Performance Issues of High-Frequency Events

   • Example with a search input: When a user types "hello" continuously, the input event is triggered 5 times.
   • If each keystroke sends a request to the server, it would result in 4 unnecessary requests (it’s better to wait until the user finishes typing).
   • Native event handling cannot automatically control frequency; debounce/throttle must be implemented for intelligent scheduling.

2. Implementation Principle of Debounce

   • Core idea: Wait for a period after an event is triggered before executing the function. If the event is triggered again within the waiting period, restart the timer.
   • Real-life analogy: An elevator door resets its closing timer when someone enters.
   • Suitable scenarios:
     • Search box suggestions (wait until the user stops typing before making a request).
     • Window resize events (recalculate layout after resizing stops).

3. Implementing a Basic Debounce Function

   function debounce(func, wait) {
     let timeoutId;
     return function (...args) {
       clearTimeout(timeoutId); // Clear the previously set timer
       timeoutId = setTimeout(() => {
         func.apply(this, args);
       }, wait);
     };
   }
   
   // Usage example
   const searchInput = document.getElementById('search');
   searchInput.addEventListener('input', debounce(function(e) {
     console.log('Sending request:', e.target.value);
   }, 500));
   

4. Implementation Principle of Throttle

   • Core idea: Execute the function at most once within a fixed time interval, like water droplets falling at a steady rate.
   • Real-life analogy: A subway train departs every 2 minutes, regardless of the number of people waiting.
   • Suitable scenarios:
     • Infinite scroll loading (check position every 200ms).
     • Mouse movement tracking (sampling at a fixed frequency).

5. Implementing a Timestamp-Based Throttle Function

   function throttle(func, interval) {
     let lastTime = 0;
     return function (...args) {
       const now = Date.now();
       if (now - lastTime >= interval) {
         func.apply(this, args);
         lastTime = now;
       }
     };
   }
   
   // Usage example
   window.addEventListener('scroll', throttle(function() {
     console.log('Calculating position:', window.scrollY);
   }, 200));
   

6. Enhanced Throttle: Ensuring First and Last Executions

   function advancedThrottle(func, interval, { leading = true, trailing = true } = {}) {
     let lastTime = 0;
     let timer = null;
   
     return function (...args) {
       const now = Date.now();
   
       // Control for immediate first execution
       if (!lastTime && !leading) lastTime = now;
   
       const remaining = interval - (now - lastTime);
   
       if (remaining <= 0) {
         if (timer) {
           clearTimeout(timer);
           timer = null;
         }
         func.apply(this, args);
         lastTime = now;
       } else if (trailing && !timer) {
         timer = setTimeout(() => {
           func.apply(this, args);
           lastTime = !leading ? 0 : Date.now();
           timer = null;
         }, remaining);
       }
     };
   }
   

7. Performance Comparison Experiment

   // Test code: Count function executions
   let count = 0;
   const testFunc = () => count++;
   
   // Raw event: Triggers 300 times during 3 seconds of fast scrolling
   // Debounced version: Triggers only once after scrolling stops
   // Throttled version (200ms): Triggers at most 15 times (3000ms / 200ms)
   

8. Optimization Techniques for Special Scenarios

   • Enhanced debounce: Supports immediate execution (e.g., instant response for the first input in a search box).
   • Adaptive throttling: Dynamically adjust the interval based on device performance.
   • Two-way binding optimization: Using lodash's debounce method in Vue/React.

Summary
Debounce is suitable for scenarios where you "wait for a stable state before executing," while throttle is ideal for "evenly distributing execution frequency." By setting appropriate time parameters, you can effectively balance user experience and performance requirements, making these techniques essential skills for front-end performance optimization.