javascript 25 lines · 6 steps

Building a debounce function in JavaScript

A closure remembers a pending timer so a function only fires after calls stop arriving.

Explained by highlit

Intermediate closures timers higher-order-functions throttling this-binding

1function debounce(fn, delay) {
let timeoutId = null;
3 
function debounced(...args) {
  const context = this;
6 
  if (timeoutId !== null) {
    clearTimeout(timeoutId);
  }
10 
  timeoutId = setTimeout(() => {
    timeoutId = null;
    fn.apply(context, args);
  }, delay);
}
16 
debounced.cancel = function () {
  if (timeoutId !== null) {
    clearTimeout(timeoutId);
    timeoutId = null;
  }
};
23 
return debounced;
25}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A closure over timeoutId lets each debounced function privately track its own pending timer.
2Clearing the previous timer on every call ensures fn only runs once activity pauses for delay ms.
3Capturing this and args at call time, then replaying them via apply, preserves the original calling context.

Related explainers

javascript

'use server'
 
import { revalidatePath } from 'next/cache'
import { redirect } from 'next/navigation'

How a Next.js Server Action updates a post

server-actions authorization validation

Intermediate 7 steps

javascript

const express = require('express');
 
const v1 = express.Router();

Versioning an API with Express Routers

api versioning routing modularity

Intermediate 10 steps

typescript

import { Pipe, PipeTransform, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
 
@Pipe({
  name: 'timeAgo',

A self-refreshing timeAgo pipe in Angular

impure-pipe change-detection timers

Advanced 10 steps

javascript

const RATE_LIMIT = 100;
const WINDOW_MS = 60 * 1000;
const BLOCK_MS = 5 * 60 * 1000;

Building a rate-limiting middleware in Express

rate-limiting middleware closures

Intermediate 9 steps

rust

use std::collections::HashMap;
 
pub struct Memoizer<K, V, F> {
    cache: HashMap<K, V>,

A generic memoizer in Rust

memoization generics caching

Intermediate 6 steps

javascript

const transitions = {
  cart: { checkout: 'shipping' },
  shipping: { submitAddress: 'payment', back: 'cart' },
  payment: { submitPayment: 'review', back: 'shipping' },