Debounce, throttle

No. 12 · SVG · Music-box recorder

Move across to turn the knob

A music-box recorder with a turning pin disc. Every click of the knob is a call; the throttle and debounce dashpots each set their own pins, so you can read when each function actually ran.

Prompt

/anatomy explain debounce versus throttle, interactive

Install

npm install anatomy-figures

In your code

page.tsx

import { Debounce } from "anatomy-figures";

<Debounce theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import Debounce from "anatomy-figures/debounce";

Theme it

Five themes (dark, light, paper, blueprint, sepia), or your own colours through tokens. Every token.

page.tsx

<Debounce
  theme="light"
  tokens={{
    "--anatomy-card": "#ffffff",
    "--anatomy-lit": "#e5484d",
  }}
/>

Without React

index.html

import { define } from "anatomy-figures/element/debounce";

define();

<anatomy-debounce theme="light"></anatomy-debounce>