Debounce without pulling in a library

Javascript

Twelve lines covering the case most projects add a dependency for, including cancelling a call that has not fired yet.

function debounce(fn, wait = 250) {
  let timer;
  const run = (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wait);
  };
  run.cancel = () => clearTimeout(timer);
  return run;
}

Download

JavaScript timing events chris

More in JavaScript

Retry a fetch with exponential backoff JavaScript Backs off on each failure and adds jitter, so a recovering service is not hit by every client at the same moment. Deep clone a value JavaScript structuredClone handles Dates, Maps, Sets and cycles, which JSON round-tripping quietly destroys. Relative time without a date library JavaScript Turns a timestamp into 'three days ago' using the built-in formatter. Run promises with a concurrency limit JavaScript Keeps a fixed number of jobs in flight rather than firing a thousand requests at once. Throttle with a trailing call JavaScript Runs at most once per interval but still fires once more after the last event, so the final state is never dropped. Format a number as currency JavaScript Intl handles the symbol, the separators and the decimal places for the locale, so you never hand-roll them. Fetch with a timeout JavaScript fetch has no timeout of its own. AbortSignal.timeout is the short way to give it one. Copy text to the clipboard JavaScript The modern API needs a secure context and a real user gesture, so the failure path matters as much as the success one.

Random picks

Sort and deduplicate lines by a field Text Processing Sorts on the second column and keeps the first row of each group. Retry with exponential backoff and jitter Python Backs off on each failure and spreads retries out, so a recovering service is not hit by every client at once. A README that people actually read Data Formats The order matters more than the length: what it is, how to run it, how to develop on it. A starting Content-Security-Policy Security Blocks inline script and restricts everything to the origin. Tighten from here rather than loosening from nothing. Visually hidden, still read aloud Web & CSS Hides a label from sight while leaving it in the accessibility tree. display:none would remove it from both. Rename a batch of files with a pattern Shell Strips a prefix from every file in a directory using shell parameter expansion, no rename utility required. Responsive grid without media queries Web & CSS auto-fill with minmax reflows on its own, so the column count follows the container rather than a breakpoint list. Serve the current directory over HTTP Shell Three ways to put a folder on localhost when you need to test something quickly.