devkits-debounce

Debounce and throttle functions. Zero dependencies, lightweight utility for rate limiting function calls.

Install

npm install -g devkits-debounce

Usage

CLI

# Run demo
debounce demo

# Run tests
debounce test

Programmatic API

const { debounce, throttle } = require('devkits-debounce');

// Debounce search input
const search = debounce((query) => {
  fetchResults(query);
}, 300);

// Throttle scroll handler
const onScroll = throttle(() => {
  updatePosition();
}, 100);

API

debounce(fn, wait, options)

Create a debounced version of a function.

| Param | Type | Description | |-------|------|-------------| | fn | Function | Function to debounce | | wait | number | Wait time in milliseconds (default: 0) | | options.leading | boolean | Call on leading edge (default: false) | | options.trailing | boolean | Call on trailing edge (default: true) | | options.maxWait | number | Maximum wait before forcing execution | | Returns | Function | Debounced function |

Methods:

• .cancel() — Cancel pending execution
• .flush() — Execute immediately if pending

throttle(fn, wait, options)

Create a throttled version of a function.

| Param | Type | Description | |-------|------|-------------| | fn | Function | Function to throttle | | wait | number | Wait time in milliseconds (default: 0) | | options.leading | boolean | Call on leading edge (default: true) | | options.trailing | boolean | Call on trailing edge (default: true) | | Returns | Function | Throttled function |

Methods:

• .cancel() — Cancel pending execution
• .flush() — Execute immediately if pending

Use Cases

Debounce

• Search inputs — Wait until user stops typing
• Window resize — Handle resize events efficiently
• Form auto-save — Save after user pauses
• API calls — Rate limit rapid requests

// Search with debounce
const searchInput = document.getElementById('search');
const search = debounce((query) => {
  api.search(query).then(renderResults);
}, 300);

searchInput.addEventListener('input', (e) => {
  search(e.target.value);
});

Throttle

• Scroll handlers — Limit scroll event frequency
• Button clicks — Prevent double-submit
• Drag operations — Smooth drag updates
• Rate limiting — Control API call frequency

// Scroll with throttle
const onScroll = throttle(() => {
  const position = window.scrollY;
  updateProgressBar(position);
}, 100);

window.addEventListener('scroll', onScroll);

Examples

// Debounce with leading edge
const debounced = debounce(() => {
  console.log('Executed!');
}, 300, { leading: true, trailing: true });

// Throttle with only trailing edge
const throttled = throttle(() => {
  console.log('Throttled!');
}, 1000, { leading: false, trailing: true });

// Cancel pending execution
const task = debounce(expensiveOperation, 1000);
task();
task.cancel(); // Won't execute

// Force immediate execution
const task2 = debounce(saveData, 5000);
task2();
task2.flush(); // Execute now

Features

• Zero dependencies — Pure JavaScript
• Full-featured — leading/trailing options, maxWait, cancel, flush
• Lightweight — ~3KB minified
• CLI + library — Command line and programmatic use
• Well-tested — Edge cases covered

Related Tools

• lodash.debounce — Lodash's debounce (larger bundle)
• lodash.throttle — Lodash's throttle

See Also

• DevKits — Developer tools
• @hezelclark/json-formatter — Format JSON

Support

Open Collective: Open Collective - DevKits

Crypto: ETH/USDC 0xDea4a6A20fCB44467e45Ef378972F54B22dC59db

License

MIT — DevKits Team