AlgorithmsTiming and eventsRuns in your browserReviewed October 1, 2026

Debounce Visualizer

Wait until events stop for a set time, then run the function once. Interactive step-by-step animation with JavaScript code, complexity and front-end use cases.

Localprivate by defaultFastno sign-up path

Timing and eventsTime: O(1) per eventSpace: O(1)

Wait (ms)User events

Events

Timer

fn() runs

0ms500ms1000ms1500ms2000ms2500ms3000ms

Now: 0 ms

Step 1 / 12

A debounced function waits until events stop for 300 ms, then runs once. Each new event cancels the old timer.

JavaScript

1function debounce(fn, wait) {
2  let timer;
3  return (...args) => {
4    clearTimeout(timer);
5    timer = setTimeout(() => fn(...args), wait);
6  };
7}

Tip: use the arrow keys to step and the space bar to play or pause.

Loading animation...

Debounce Visualization and Animation

Wait until events stop for a set time, then run the function once. Every event cancels the previous timer. Start a new timer for the wait time. If no event arrives before the timer ends, the function runs. Time complexity: O(1) per event. Space complexity: O(1). Search-as-you-type, form validation, window resize and autosave - anywhere you only care about the final value.

How to use Debounce Visualizer

Every event cancels the previous timer.
Start a new timer for the wait time.
If no event arrives before the timer ends, the function runs.
Press Play, or step through with the arrow buttons and change the input to see how it reacts.

Questions

What is Debounce?

Wait until events stop for a set time, then run the function once.

What is the time complexity of Debounce?

Time: O(1) per event. Space: O(1).

Where do front-end developers use Debounce?

Search-as-you-type, form validation, window resize and autosave - anywhere you only care about the final value.

Does this upload my data?

No. This converter runs in your browser for ordinary use, so the input is not sent to a backend by this tool.

Related tools

Keep working without searching again.

Sorting