Rate Limit Lab

Five limiters, one request button. Runs in the browser.

—
accepted

Token Bucket

10 / 10 tokens

Full

Waiting for the first request.

Each request spends one token. The bucket refills continuously, up to capacity.

Tokens
10
Refill
2/s
Next token
ready

Enter or R sends one · B bursts · A toggles auto-fire

Token Bucket

Allows a burst up to the bucket size, then enforces an average rate.

How it works

The bucket starts full. Each allowed request spends one token. Tokens return continuously at the refill rate and never stack past capacity. An empty bucket rejects until one token has dripped back.

Try this

Send a burst of 10. The bucket empties and the rest are denied. Wait — tokens return at the refill rate, and single requests start passing again.

Pros

  • · Allows controlled bursts
  • · Smooth long-run rate
  • · Cheap: two numbers of state

Cons

  • · A full bucket can stampede a downstream service
  • · Capacity and refill rate both need tuning

token-bucket.js

// Token bucket — burst up to capacity, then refillPerSecond.
function createTokenBucket({ capacity, refillPerSecond }) {
  let tokens = capacity;
  let last = Date.now();

  return function allow(now = Date.now()) {
    const elapsed = Math.max(0, now - last) / 1000;
    tokens = Math.min(capacity, tokens + elapsed * refillPerSecond);
    last = now;
    if (tokens >= 1) {
      tokens -= 1;
      return true;
    }
    return false;
  };
}

// const allow = createTokenBucket({ capacity: 10, refillPerSecond: 2 });
// allow();