typescript
45 lines · 7 steps
How a token bucket rate limiter works
A token bucket refills over time and only allows an action when enough tokens remain.
Explained by
highlit
1interface TokenBucketOptions {
2 capacity: number;
3 refillPerSecond: number;
4}
5
6export class TokenBucket {
7 private tokens: number;
8 private lastRefill: number;
9
10 constructor(private readonly options: TokenBucketOptions) {
11 this.tokens = options.capacity;
12 this.lastRefill = Date.now();
13 }
14
15 private refill(): void {
16 const now = Date.now();
17 const elapsedSeconds = (now - this.lastRefill) / 1000;
18 if (elapsedSeconds <= 0) return;
19 this.tokens = Math.min(
20 this.options.capacity,
21 this.tokens + elapsedSeconds * this.options.refillPerSecond,
22 );
23 this.lastRefill = now;
24 }
25
26 tryRemove(count = 1): boolean {
27 this.refill();
28 if (this.tokens < count) return false;
29 this.tokens -= count;
30 return true;
31 }
32}
33
34export function rateLimit<Args extends unknown[], R>(
35 fn: (...args: Args) => R,
36 options: TokenBucketOptions,
37): (...args: Args) => R {
38 const bucket = new TokenBucket(options);
39 return (...args: Args): R => {
40 if (!bucket.tryRemove()) {
41 throw new Error("Rate limit exceeded");
42 }
43 return fn(...args);
44 };
45}
01 / 01
STEP 01
‹ swipe to step through ›
Walkthrough
Space play
←→ step
click any line
Three takeaways
- 1Lazy refill on each access avoids needing a background timer to replenish tokens.
- 2Clamping with Math.min keeps accumulated tokens from exceeding the bucket's capacity.
- 3Wrapping a function in a higher-order limiter cleanly separates throttling from business logic.
Related explainers
typescript
import { CallHandler, ExecutionContext, Injectable,
Wrapping responses in a NestJS interceptor
interceptors
rxjs
response-shaping
Intermediate
7 steps
typescript
type RetryOptions = { retries?: number; timeoutMs?: number; baseDelayMs?: number;
Retry with timeout and backoff in TypeScript
promises
retry
exponential-backoff
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
go
package cache import ( "container/list"
Building a generic LRU cache in Go
lru-cache
generics
linked-list
Intermediate
8 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
Share this explainer
Here's the card — post it anywhere.
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code
Embed this explainer
Drop the interactive walkthrough into a blog or docs. Views never cost a credit.
<iframe src="https://highlit.co/explainers/how-a-token-bucket-rate-limiter-works-explained-typescript-736c/embed?autoplay=1" width="100%" height="520" loading="lazy" style="border:0"></iframe>
Autoplay is on by default — add ?autoplay=0 to start paused.