Util

debounce

Wrap a callback so it fires only once a quiet period (waitMs) elapses after the last call. Returns a function with a .cancel() method for safe teardown.

Usage

import { debounce } from 'ngwr/utils';

const onResize = debounce(() => recalcLayout(), 150);
window.addEventListener('resize', onResize);

// Cancel any pending invocation on teardown:
onResize.cancel();

Why ngwr provides this

Resize / input / scroll handlers almost always want debouncing. Rolling your own with setTimeout / clearTimeout is doable but easy to leak on teardown, and reaching for lodash pulls ~70 KB just for one helper. ngwr's version is tiny and exposes .cancel() so the host's DestroyRef.onDestroy can clean up cleanly.

// Native — manual timer dance, easy to leak on teardown.
let t: ReturnType<typeof setTimeout> | undefined;
function onResize() {
  if (t) clearTimeout(t);
  t = setTimeout(() => recalcLayout(), 150);
}
// → on destroy, you need to remember to `clearTimeout(t)` yourself.

// lodash — ~70 KB pulled in just for one utility.

// ngwr — tiny, with `.cancel()` for safe teardown.
const onResize = debounce(() => recalcLayout(), 150);
destroyRef.onDestroy(() => onResize.cancel());

API

NameDescriptionTypeDefault
debounce(fn, waitMs)Returns a wrapper that fires fn only once waitMs has elapsed without further calls. The wrapper exposes a .cancel() method for cleanup.(fn, ms) => WrDebouncedFn