debounce-throttle

Quick usage

import { debounce, throttle } from '@manufosela/debounce-throttle';

const debounced = debounce(onInput, 300);
const throttled = throttle(onScroll, 200);

Debounce - Search Input

Type in the input and see how debounce delays the API call until you stop typing.

import { debounce } from '@manufosela/debounce-throttle';

const debouncedSearch = debounce((value) => {
  fetch(`/api/search?q=${value}`);
}, 300);

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

Throttle - Scroll Handler

Scroll inside the box and see how throttle limits the handler calls.

import { throttle } from '@manufosela/debounce-throttle';

const onScroll = throttle(() => {
  console.log('scroll tick');
}, 100);

scrollArea.addEventListener('scroll', onScroll);

Once - Single Initialization

Click the button multiple times - the function only executes once.

import { once } from '@manufosela/debounce-throttle';

const initOnce = once(() => {
  initWidget();
});

button.addEventListener('click', initOnce);

Rate Limit - API Calls

Limited to 5 calls per 3 seconds. Click rapidly to see rate limiting in action.

import { rateLimit } from '@manufosela/debounce-throttle';

const limitedCall = rateLimit(() => {
  callApi();
}, 5, 3000);

button.addEventListener('click', limitedCall);