typescript 39 lines · 7 steps

Building a trailing-edge throttle in TypeScript

A generic throttle that runs immediately when allowed and otherwise schedules one trailing call, used to drive a scroll progress bar.

Explained by highlit
Intermediate throttling closures generics event-handling rate-limiting
1function throttle<T extends (...args: any[]) => void>(
2 fn: T,
3 limit: number
4): (...args: Parameters<T>) => void {
5 let lastRun = 0;
6 let queued: ReturnType<typeof setTimeout> | null = null;
7 
8 return function (this: unknown, ...args: Parameters<T>) {
9 const now = Date.now();
10 const remaining = limit - (now - lastRun);
11 
12 if (remaining <= 0) {
13 if (queued) {
14 clearTimeout(queued);
15 queued = null;
16 }
17 lastRun = now;
18 fn.apply(this, args);
19 } else if (!queued) {
20 queued = setTimeout(() => {
21 lastRun = Date.now();
22 queued = null;
23 fn.apply(this, args);
24 }, remaining);
25 }
26 };
27}
28 
29const progressBar = document.querySelector<HTMLElement>('#reading-progress');
30 
31const updateProgress = throttle(() => {
32 if (!progressBar) return;
33 const scrollTop = window.scrollY;
34 const docHeight = document.documentElement.scrollHeight - window.innerHeight;
35 const percent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
36 progressBar.style.width = `${Math.min(percent, 100)}%`;
37}, 100);
38 
39window.addEventListener('scroll', updateProgress, { passive: true });
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1A throttle bounds how often a function runs by tracking the timestamp of the last execution.
  2. 2Scheduling a trailing call ensures the final invocation isn't lost when events stop mid-window.
  3. 3Generic constraints with Parameters<T> let one wrapper preserve any function's signature type-safely.

Related explainers

typescript 
import { NestFactory } from '@nestjs/core';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import { ValidationPipe } from '@nestjs/common';
import { ApiProperty } from '@nestjs/swagger';

Wiring validation and Swagger docs in NestJS

validation openapi decorators
Intermediate 8 steps
javascript 
const ROLE_PERMISSIONS = {
  admin: ['users:read', 'users:write', 'billing:read', 'billing:write'],
  manager: ['users:read', 'billing:read'],
  member: ['users:read'],

Role-based permissions middleware in Express

authorization middleware rbac
Intermediate 9 steps
typescript 
import { Component, Input } from '@angular/core';
 
interface Order {
  id: string;

How Angular ICU plurals localize an order summary

i18n pluralization standalone-component
Intermediate 8 steps
typescript 
import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable, catchError, concatMap, finalize } from 'rxjs';
import { DataSource, QueryRunner } from 'typeorm';
 

Wrapping requests in a transaction with NestJS

interceptors transactions rxjs
Advanced 7 steps
typescript 
type CsvColumn<T> = {
  header: string;
  value: (row: T) => string | number | boolean | null | undefined;
};

Building a type-safe CSV writer in TypeScript

generics serialization escaping
Intermediate 7 steps
ruby 
class Api::MessagesController < ApiController
  before_action :authenticate_api_key!
 
  rate_limit to: 100,

Layered API rate limiting in Rails

rate-limiting api-authentication throttling
Intermediate 9 steps

Share this explainer

Here's the card — post it anywhere.

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