Codestin Search App

Debounce - Problem

JavaScript Medium

Imagine you're developing a search feature for an e-commerce website. Every time a user types a character, your code wants to make an API call to fetch search results. But if a user types quickly, you'd end up making dozens of unnecessary API calls!

Debouncing is a technique that solves this problem by delaying function execution and canceling previous calls if new ones arrive within a time window.

Given a function fn and a time delay t milliseconds, return a debounced version of that function. The debounced function should:

Delay execution by t milliseconds
Cancel previous executions if called again within the delay window
Pass through all parameters to the original function

Example: If t = 50ms and calls happen at 30ms, 60ms, and 100ms:

Call at 30ms → Scheduled for 80ms, but gets cancelled
Call at 60ms → Scheduled for 110ms, but gets cancelled
Call at 100ms → Finally executes at 150ms

Input & Output

example_1.js — Basic Debounce

$ Input: fn = (x) => x * 2, t = 100ms Calls: debounced(5) at 0ms, debounced(10) at 50ms

› Output: Function executes once with argument 10 at 150ms, returns 20

💡 Note: The first call gets cancelled when the second call arrives within the 100ms window. Only the second call executes after the full delay.

example_2.js — Multiple Parameters

$ Input: fn = (a, b) => a + b, t = 50ms Calls: debounced(1, 2) at 0ms, debounced(3, 4) at 25ms, debounced(5, 6) at 75ms

› Output: Function executes once with arguments (5, 6) at 125ms, returns 11

💡 Note: All parameters are preserved through the debounce mechanism. The final call wins and executes with its original arguments.

example_3.js — Spaced Calls

$ Input: fn = (msg) => console.log(msg), t = 100ms Calls: debounced('A') at 0ms, debounced('B') at 150ms

› Output: Logs 'A' at 100ms, then logs 'B' at 250ms

💡 Note: Since the calls are spaced more than 100ms apart, both execute independently without cancellation.

Constraints

0 ≤ t ≤ 1000 (delay in milliseconds)
Function can be called with any number of arguments
Must preserve 'this' context of original function calls
Should handle rapid successive calls efficiently

Visualization

Tap to expand

Understanding the Visualization

User Types 'a'

Timer starts: API call scheduled for 300ms later

User Types 'ap'

Previous timer cancelled, new timer starts for 'ap'

User Types 'app'

Previous timer cancelled, new timer starts for 'app'

User Pauses

Timer completes - API call made for 'app'

Key Takeaway

🎯 Key Insight: Debouncing transforms rapid, chaotic events into single, meaningful actions by intelligently canceling and rescheduling execution.

Asked in

G Google 85 f Meta 72 a Amazon 68 ⊞ Microsoft 55 N Netflix 43 U Uber 38

The optimal debounce solution uses a closure to maintain a timeout ID, clearing any existing timeout and setting a new one on each function call. This ensures only the most recent call executes after the specified delay, with O(1) time and space complexity.

Common Approaches

Approach	Time	Space	Notes
✓ Basic Timeout Management	O(1)	O(1)	Store timeout ID and cancel previous timeouts on each call

Basic Timeout Management — Algorithm Steps

Store a timeout ID in a closure variable
On each function call, clear any existing timeout using clearTimeout
Set a new timeout that will execute the original function after delay
Return the timeout ID for potential future cancellation

Visualization

Tap to expand

Step-by-Step Walkthrough

First Call

Timer starts counting down from delay time

Second Call

Previous timer cancelled, new timer starts

Final Execution

Timer completes countdown and executes function

Code -

solution.c — C

#include <stdio.h>
#include <stdlib.h>
#include <unistd.h>
#include <signal.h>
#include <sys/time.h>

static int timer_active = 0;
static timer_t timer_id;
static void (*stored_callback)(const char*);
static char* stored_message;

void timer_handler(int sig) {
    if (timer_active && stored_callback) {
        stored_callback(stored_message);
        timer_active = 0;
    }
}

void debounce_call(void (*callback)(const char*), const char* message, int delay_ms) {
    // Cancel existing timer
    if (timer_active) {
        alarm(0);
        timer_active = 0;
    }
    
    // Store callback and message
    stored_callback = callback;
    if (stored_message) free(stored_message);
    stored_message = malloc(strlen(message) + 1);
    strcpy(stored_message, message);
    
    // Set up signal handler
    signal(SIGALRM, timer_handler);
    
    // Set new timer
    timer_active = 1;
    alarm((delay_ms + 999) / 1000); // Convert ms to seconds, round up
}

void log_message(const char* msg) {
    printf("Executed: %s\n", msg);
}

int main() {
    debounce_call(log_message, "Call 1", 100); // Will be cancelled
    usleep(50000); // 50ms
    debounce_call(log_message, "Call 2", 100); // Will be cancelled  
    usleep(150000); // 150ms
    debounce_call(log_message, "Call 3", 100); // Will execute
    usleep(200000); // 200ms
    
    if (stored_message) free(stored_message);
    return 0;
}

Time & Space Complexity

Time Complexity

⏱️

O(1)

Each function call just sets/clears a timeout, which are constant time operations

✓ Linear Growth

Space Complexity

O(1)

Only stores a single timeout ID regardless of number of calls

✓ Linear Space

89.2K Views

Very High Frequency

~15 min Avg. Time

2.3K Likes

Ln 1, Col 1

Smart Actions

💡 Explanation

AI Ready

💡 Suggestion Tab to accept Esc to dismiss

// Output will appear here after running code

Code Editor Closed

Click the red button to reopen

Input & Output

Constraints

Visualization

Related Problems

Common Approaches

Basic Timeout Management — Algorithm Steps

Visualization

Code -

Time & Space Complexity

Select Compiler