2627. Debounce

 

Implementing a Debounce Function in JavaScript

When building web applications, one common challenge developers face is handling high-frequency events like scrolling, resizing, or keystrokes. These events can trigger functions repeatedly, leading to performance issues. This is where the debounce technique comes in handy. In this blog post, we'll explore how to implement a debounce function in JavaScript to manage such scenarios efficiently.

What is Debouncing?

Debouncing is a programming practice used to ensure that a function is only executed once after a specified period has passed since the last time it was invoked. This technique is particularly useful for optimizing performance and enhancing user experience by limiting the rate at which a function can be called.

Intuition

The goal of the debounce function is to limit the frequency at which a function (fn) is executed. This is particularly useful in scenarios where rapid and repeated function calls occur, such as during user input or window resizing. The basic idea is to delay the execution of the function until a certain period of time (t) has passed since the last call. If another call is made during this period, the previous delay is cancelled, and the timer resets.

Approach

The debounce function works by using a timeout to delay the execution of the provided function (fn). When the returned debounced function is called:

  1. Clear Existing Timeout: It clears any existing timeout using clearTimeout(timer). This prevents the previous call from executing.

  2. Set New Timeout: It sets a new timeout using setTimeout for the provided delay time (t).

  3. Execute Function: If no further calls are made within the delay period, the function (fn) is executed with the provided arguments.

This approach ensures that the function only runs after the specified delay period has elapsed without additional calls.

Implementation

Here is the JavaScript implementation of the debounce function:

/**
 * @param {Function} fn
 * @param {number} t milliseconds
 * @return {Function}
 */
var debounce = function(fn, t) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), t);
    }
};

/**
 * const log = debounce(console.log, 100);
 * log('Hello'); // cancelled
 * log('Hello'); // cancelled
 * log('Hello'); // Logged at t=100ms
 */

In this example:
  • We create a debounced version of the console.log function with a delay of 100 milliseconds.
  • Each call to the debounced function within the 100ms delay cancels the previous call.
  • Only the final call is executed after the delay period, logging "Hello" to the console.
Complexity
Time Complexity
The time complexity for each function invocation is O(1) because setting and clearing timeouts are constant-time operations.
Space Complexity
The space complexity is O(1) since only a single timeout ID (timer) is stored at any given time, regardless of the number of function calls.
Conclusion
Debouncing is a powerful technique to optimize performance and improve user experience in web applications. By implementing a debounce function, you can control the frequency of function execution and ensure that your application remains responsive even during high-frequency events.
Give this debounce function a try in your next project, and feel free to share your experiences or ask any questions in the comments below!
Happy coding! šŸš€

Comments

Post a Comment

Popular posts from this blog

3Sum Closest: O(n²) Two-Pointer Magic šŸš€ leetcode: 16

Three Sum Closest - LeetCode Solution In this blog post, we'll dive into the Three Sum Closest problem, a popular coding challenge on LeetCode. We'll explore the intuition behind the solution, discuss the approach, analyze the complexity, and provide a detailed explanation of the code. Additionally, I'll share my LeetCode solution link for further reference. Problem Statement Given an integer array nums of length n and an integer target , find three integers in nums such that the sum is closest to target . Return the sum of the three integers. You may assume that each input would have exactly one solution. Intuition The problem requires finding three numbers in the array whose sum is as close as possible to the target. To efficiently find such a triplet, we can use a combination of sorting and the two-pointer technique . Sorting : First, sort the array. This allows us to use the two-po...
Read more

Kadane's Algorithm: Maximum Subarray Problem - LeetCode(53) Solution

Maximum Subarray Problem - LeetCode Solution Maximum Subarray Problem - LeetCode Solution Problem Statement Given an integer array nums , find the contiguous subarray (containing at least one number) that has the largest sum and return its sum. Intuition The problem requires finding the contiguous subarray with the maximum sum. A brute force approach would involve checking all subarrays, but this would be inefficient. Instead, we use Kadane's Algorithm , which efficiently finds the maximum sum subarray in O(n) time. Approach Initialize two variables: total (running sum) and maxi (maximum sum encountered so far). Iterate through the array: Add the current element to total . Update maxi with the maximum of maxi and total . If total becomes negative, reset it to zero. Return maxi as the maximum sub...
Read more

LeetCode Problem: Implement pow(x, n) leetcode:- 50

Understanding the Fast Exponentiation Algorithm: Exponentiation by Squaring In this blog post, we will explore the implementation of the myPow function, a common problem found on LeetCode. The goal of this problem is to compute \(x^n\) efficiently, even when \(n\) is a very large number. Instead of using a naive approach, we employ a method called Exponentiation by Squaring to significantly reduce the number of multiplications required. Problem Overview Given a floating-point number x and an integer n , our task is to implement a function that computes \(x^n\). A straightforward solution might involve multiplying x by itself n times, but this approach is too slow when n is large. Intuition Behind Exponentiation by Squaring The main idea is to reduce the problem size by halving the exponent at each recursive step. Consider the following: If n is even, then: \(x^n = x^{...
Read more