javascript 39 lines · 6 steps

Building a leading-and-trailing throttle

A closure-based throttle that fires immediately, then guarantees a trailing call for events that arrive during the cooldown.

Explained by highlit
Advanced closures rate-limiting timers this-binding higher-order-functions
1function throttle(fn, wait) {
2 let lastCall = 0;
3 let timeoutId = null;
4 let lastArgs = null;
5 let lastThis = null;
6 
7 function invoke() {
8 lastCall = Date.now();
9 timeoutId = null;
10 fn.apply(lastThis, lastArgs);
11 lastArgs = lastThis = null;
12 }
13 
14 function throttled(...args) {
15 const now = Date.now();
16 const remaining = wait - (now - lastCall);
17 lastArgs = args;
18 lastThis = this;
19 
20 if (remaining <= 0) {
21 if (timeoutId) {
22 clearTimeout(timeoutId);
23 timeoutId = null;
24 }
25 invoke();
26 } else if (!timeoutId) {
27 timeoutId = setTimeout(invoke, remaining);
28 }
29 }
30 
31 throttled.cancel = function () {
32 clearTimeout(timeoutId);
33 timeoutId = null;
34 lastCall = 0;
35 lastArgs = lastThis = null;
36 };
37 
38 return throttled;
39}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Closures let a returned function carry private state like timers and timestamps across calls.
  2. 2Capturing both args and this keeps a deferred trailing invocation faithful to the original call site.
  3. 3Exposing a cancel method gives callers a way to clear pending timers and avoid stale invocations.

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
python 
import time
from collections import defaultdict
from threading import Lock
 

Sliding-window login rate limiting in Flask

rate-limiting sliding-window thread-safety
Intermediate 7 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

Share this explainer

Here's the card — post it anywhere.

Building a leading-and-trailing throttle — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code