Lecture_Notes/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/10_Debouncing and Throttling.md

SetTimeout Method

SetTimeout is a method that allows you to execute a specific function after a certain delay.

Syntax:

SetTimeoutCfn(function, delay);

• function: The function you want to execute after the delay.
• delay: The time interval (in milliseconds) after which the specified function should be executed.

For example, if you want to start an animation after a delay of 1, 2, or 3 seconds, you could use the following code:

function startAnimation() {
    // Code to start the animation
}

// Using SetTimeout to call the startAnimation function after a delay
SetTimeoutCfn(startAnimation, 1000); // 1000 milliseconds (1 second)
SetTimeoutCfn(startAnimation, 2000); // 2000 milliseconds (2 seconds)
SetTimeoutCfn(startAnimation, 3000); // 3000 milliseconds (3 seconds)

// Declare a variable to hold the timeout ID
let animationTimeout;

// Function to start the animation
function startAnimation() {
    // Code to start the animation
    console.log("Animation started");
}

// Function to stop the animation
function stopAnimation() {
    // Clear the timeout to prevent the animation from starting
    clearTimeout(animationTimeout);
    console.log("Animation stopped");
}

// Using SetTimeout to call the startAnimation function after a delay
animationTimeout = setTimeout(startAnimation, 2000); // Starts after 2000 milliseconds (2 seconds)

// You can call stopAnimation to cancel the scheduled animation
// For example, if you want to stop it before it starts
stopAnimation();

In this example, we've introduced a variable animationTimeout to store the ID returned by the setTimeout function. This ID represents the scheduled timeout. When you want to stop the animation, you call clearTimeout(animationTimeout), which cancels the scheduled animation and prevents it from starting.

Remember that using the clearTimeout function only has an effect if the specified timeout has not yet occurred. If the timeout has already triggered and the animation has started, clearing the timeout won't have any impact on the ongoing animation.

Debouncing

Debouncing is a technique used in web development to control the rate at which a function is executed, particularly in response to frequent events like scrolling, resizing, or typing. It ensures that a function is only executed after a certain period of inactivity, effectively reducing the number of times the function is called and improving performance.

The basic idea behind debouncing is to postpone the execution of a function until a certain amount of time has passed since the last event. This is particularly useful when you want to avoid triggering a function multiple times rapidly, which can lead to unnecessary computations or actions.

Here's a simple example of debouncing using JavaScript:

// Debounce function: accepts a function and a delay
function debounce(func, delay) {
    let timeoutId;

    // Return a function that will be executed after the delay
    return function() {
        // Clear the previous timeout
        clearTimeout(timeoutId);

        // Set a new timeout
        timeoutId = setTimeout(func, delay);
    };
}

// Function to be debounced
function processInput() {
    console.log("Processing input...");
}

// Create a debounced version of the processInput function
const debouncedProcessInput = debounce(processInput, 300);

// Simulate frequent user input (e.g., typing)
document.addEventListener("input", debouncedProcessInput);

In this example, the debounce function takes two arguments: the function you want to debounce (func) and the delay period (delay). It returns a new function that, when invoked, will clear any existing timeout and set a new one to execute the original function after the specified delay.

The debounced version of the processInput function (debouncedProcessInput) is then used as an event listener for the "input" event. This means that the processInput function will only be executed after the user has stopped typing for 300 milliseconds. If the user continues typing, the timeout will be reset, ensuring that the function is only executed once there's a pause in typing.

This technique is useful in scenarios where you want to avoid overwhelming the system with frequent function calls, especially for tasks like live search suggestions, updating search results, or handling user interactions.

Certainly! Let's walk through the theoretical explanation of the debouncing code using the provided IDs and time intervals: id=1 with 1000ms, id=2 with 2000ms, id=3 with 2500ms, and id=4 with 3000ms. We'll use these values to simulate events and understand how the debouncing mechanism works.

Scenario and Explanation:

Imagine that we have a user interface with a search bar. The user is typing in the search bar to perform a search, and we want to send a network request to fetch search results. However, we don't want to send a network request for every keystroke; instead, we want to wait until the user has finished typing or paused before sending the request.

Here's how the events play out:

1. id=1, 1000ms: The user starts typing. This event triggers the debouncedSendNetworkRequest function, which is set to execute after a delay of 1000ms. Since the user hasn't finished typing yet, the timer is reset to 1000ms.

2. id=2, 2000ms: The user continues typing. Another event occurs while the timer is still counting down. The timer is reset to 2000ms.

3. id=3, 2500ms: The user is still typing, but this time there's less than 2500ms left on the timer. The timer is reset to 2500ms.

4. id=4, 3000ms: The user has stopped typing, and there's no further event triggering. The timer reaches 0 after 3000ms of inactivity. At this point, the debouncedSendNetworkRequest function is finally executed since there hasn't been any activity for the duration of the timeout.

Explanation of Code:

Let's use the provided code example to explain how this works in JavaScript:

// Debounce function for network requests
function debounceNetworkRequest(func, delay) {
    let timeoutId;

    return function() {
        clearTimeout(timeoutId);

        timeoutId = setTimeout(func, delay);
    };
}

// Function to send network request
function sendNetworkRequest() {
    // Code to send the network request
    console.log("Network request sent");
}

// Create a debounced version of the network request function
const debouncedSendNetworkRequest = debounceNetworkRequest(sendNetworkRequest, 1000);

// Simulate user typing events
console.log("User starts typing...");
debouncedSendNetworkRequest(); // id=1, 1000ms
debouncedSendNetworkRequest(); // id=2, 2000ms
debouncedSendNetworkRequest(); // id=3, 2500ms
console.log("User stops typing...");
debouncedSendNetworkRequest(); // id=4, 3000ms

As the code simulates user typing events and the associated debounced function calls, you'll notice that the actual network request is only sent when the user stops typing or pauses for at least 3000ms (the highest delay among the simulated events). This demonstrates how debouncing effectively postpones the execution of the function until the user's input has settled.

Throttling

Throttling is another technique used in web development to control the rate at which a function is executed, particularly in response to frequent events. Unlike debouncing, where the function is delayed until a certain period of inactivity occurs, throttling ensures that the function is executed at a steady rate, but not more frequently than a defined interval.

In your example, let's explain throttling using the provided IDs and time intervals: id=1 with 1000ms, id=2 with 2000ms, id=3 with 2500ms, and id=4 with 3000ms.

Scenario and Explanation:

Imagine the same user interface with a search bar, and the user is typing to perform a search. In this case, we want to ensure that the network request is sent at a controlled rate, regardless of how quickly the user types. This helps to prevent excessive network requests and maintain a smoother user experience.

Here's how the events play out using throttling:

1. id=1, 1000ms: The user starts typing. The throttledSendNetworkRequest function is triggered. Since there's been more than 1000ms since the last execution, the network request is sent immediately.

2. id=2, 2000ms: The user continues typing. An event occurs within 2000ms of the last execution. However, the throttling mechanism prevents the throttledSendNetworkRequest function from executing immediately. The function will be queued to execute after 1000ms (the throttle interval).

3. id=3, 2500ms: The user is still typing, and an event occurs within the 1000ms throttle interval. However, the function execution is still delayed, as it hasn't been 1000ms since the last execution.

4. id=4, 3000ms: The user has stopped typing, and an event occurs after 3000ms since the last execution. The throttledSendNetworkRequest function is triggered again, as the throttle interval has passed.

Explanation of Code:

Here's how the throttling code example works in JavaScript:

// Throttle function for network requests
function throttleNetworkRequest(func, delay) {
    let lastExecution = 0;

    return function() {
        const now = Date.now();

        if (now - lastExecution >= delay) {
            func();
            lastExecution = now;
        }
    };
}

// Function to send network request
function sendNetworkRequest() {
    // Code to send the network request
    console.log("Network request sent");
}

// Create a throttled version of the network request function
const throttledSendNetworkRequest = throttleNetworkRequest(sendNetworkRequest, 1000);

// Simulate user typing events
console.log("User starts typing...");
throttledSendNetworkRequest(); // id=1, 1000ms
throttledSendNetworkRequest(); // id=2, 2000ms (delayed)
throttledSendNetworkRequest(); // id=3, 2500ms (delayed)
console.log("User stops typing...");
throttledSendNetworkRequest(); // id=4, 3000ms

In this code, the throttleNetworkRequest function is used to create a throttled version of the network request function. The function execution time is compared to the last execution time, and if the specified delay has passed since the last execution, the function is executed immediately. Otherwise, it's delayed until the delay interval has passed.

This mechanism ensures that the network request is sent at a controlled rate, respecting the throttle interval, and prevents excessive requests while still providing timely results to the user.

Here's a tabular comparison between debouncing and throttling:

Aspect	Debouncing	Throttling
Purpose	Delay function execution until inactivity	Limit function execution rate
Execution	Executes after a pause in events	Executes at a steady rate
Event Resets Timer?	Yes, resets the timer on each event during delay	No, maintains a steady execution interval
Frequency Handling	Reduces function calls during rapid events	Limits function calls to a set interval
Use Cases	Typing (search suggestions), resizing events	Scrolling, mouse movement, rate-limited APIs

Remember that the choice between debouncing and throttling depends on the specific use case and the desired behavior for handling frequent events in your application.