Debounce Throttle
Testing & Qualitydebounce-throttleDebounce Throttle is an Agent Skill for testing & quality published in the thedaviddias/Front-End-Checklist repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.
Use when reviewing scripts, client components, bundles, or runtime behavior related to Debounce and throttle event handlers. Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.
How to use this skill
Bring this guide into your coding agent with a prompt tailored to the tool you use.
- Open your project in Codex.
- Copy and paste the prompt below.
- Review files and risks before approving any action.
Inspect the Agent Skill at https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/debounce-throttle/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/debounce-throttle, but wait for my approval before writing files or running scripts.
Copying this prompt does not install or run the skill. Review third-party files before use.
Debounce and throttle event handlers
High-frequency events fire hundreds of times per second, causing UI jank, excessive API calls, and poor Interaction to Next Paint (INP) scores.
Quick Reference
- Debounce: delays execution until activity stops (search inputs, form validation)
- Throttle: limits execution rate (scroll, resize handlers)
- Use 150-300ms delay for user input, 100ms for scroll/resize
- Clean up event listeners to prevent memory leaks
Check
Review this JavaScript code for scroll, resize, input, mousemove, or other high-frequency event handlers that should use debounce or throttle.
Fix
Add debounce or throttle to high-frequency event handlers to limit execution rate and improve performance.
Explain
Explain the difference between debounce and throttle, and when to use each pattern for optimal performance.
Code Review
Review scripts, client components, and browser execution paths related to Debounce and throttle event handlers. Flag exact imports, event handlers, runtime side effects, or blocking operations that violate the rule, and state how the change should be verified in the browser.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/javascript/debounce-throttle