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) {
let lastCall = 0;
let timeoutId = null;
let lastArgs = null;
let lastThis = null;
6 
function invoke() {
  lastCall = Date.now();
  timeoutId = null;
  fn.apply(lastThis, lastArgs);
  lastArgs = lastThis = null;
}
13 
function throttled(...args) {
  const now = Date.now();
  const remaining = wait - (now - lastCall);
  lastArgs = args;
  lastThis = this;
19 
  if (remaining <= 0) {
    if (timeoutId) {
      clearTimeout(timeoutId);
      timeoutId = null;
    }
    invoke();
  } else if (!timeoutId) {
    timeoutId = setTimeout(invoke, remaining);
  }
}
30 
throttled.cancel = function () {
  clearTimeout(timeoutId);
  timeoutId = null;
  lastCall = 0;
  lastArgs = lastThis = null;
};
37 
return throttled;
39}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

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

Related explainers

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

php

<?php
 
namespace App\Services;

How a password strength validator works in PHP

validation regular-expressions data-driven

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

func (w *Watcher) resetDebounce(d time.Duration) {
	if !w.timer.Stop() {
		select {
		case <-w.timer.C:

Debouncing a stream of events in Go

debounce timers channels

Advanced 7 steps

python

import secrets
 
from django.contrib.auth import authenticate, login
from django.core.cache import cache

Two-factor login with OTP in Django

two-factor-auth one-time-passwords caching

Intermediate 9 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);