AYDOPE • JAVASCRIPT PLAYGROUND
Interactive Event Laboratory

Debounce vs Throttle

Two simple JavaScript techniques that can dramatically change how often your application executes expensive operations.

Try Debounce Try Throttle
EXPERIMENT 01

Search Control Room

Type quickly and watch how Debounce waits until the user stops typing before executing the expensive operation.

Delay: 500ms
Waiting
Keystroke Events
0
API Executions
0
Saved Executions
0%
Event Timeline
Start typing to generate events...
01

Debounce

Debounce delays execution until events stop happening for a specific amount of time.

Mental Model

"Keep waiting... now execute. "

→ Search boxes
→ Autocomplete
→ Form validation
EXPERIMENT 02

Scroll Reactor

Scroll the page and watch Throttle limit how frequently your handler executes.

Limit: 100ms
Window Scroll Monitor
Reactor Stable
Scroll the entire page to generate events
Raw Events
0
Throttled
0
Reduction
0%
02

Throttle

Throttle allows a function to execute at most once within a defined time interval.

Mental Model

"Events can keep coming. Execute at controlled intervals. "

→ Scroll handlers
→ Mouse movement
→ Window resize
EVENT STREAM
Continuous

Scroll events can fire many times while the user is moving through the page.

THROTTLE WINDOW
100ms

The handler is allowed to execute once during each 100ms interval.

RESULT
Fewer Executions

The browser can receive many events without forcing your expensive logic to run for every single event.

FINAL COMPARISON

The Core Difference

Debounce

Wait → Execute

Best when you only care about the final event after a burst of activity.

Example: User finishes typing → send request

Throttle

Control → Execute

Best when events continuously happen but you still need controlled periodic execution.

Example: User scrolls → update position periodically