+
+
1. Every Gust Answered Is Chaos
+
Wind doesn't gust once politely — it fires dozens of times a second, unevenly. A handler that reacts to every event does exactly that much work, every time, whether the input is meaningful or just noise.
+
window.addEventListener("scroll", () => {
+ reflowExpensiveLayout(); // fires 60+ times/sec
+});
+// the kite jerks on every gust — turbulence,
+// not altitude.
+
+
+
2. Debounce — Wait For Calm
+
A debounced function resets its own timer every time it's called, and only actually runs once the calls stop for a set quiet period. Perfect for bursts that need one clean reaction after they settle.
+
function debounce(fn, wait) {
+ let t;
+ return (...args) => {
+ clearTimeout(t);
+ t = setTimeout(() => fn(...args), wait);
+ };
+}
+const releaseString = debounce(letOutRope, 500);
+
+
+
3. Throttle — Steady, No Matter What
+
A throttled function runs immediately, then ignores every call until a fixed interval has passed — then it's ready again. It guarantees a steady cadence regardless of how fast the input actually arrives.
+
function throttle(fn, interval) {
+ let last = 0;
+ return (...args) => {
+ const now = Date.now();
+ if (now - last >= interval) {
+ last = now;
+ fn(...args);
+ }
+ };
+}
+const pullString = throttle(letOutRope, 300);
+
+
+
4. Choosing Between Them
+
Debounce assumes the input eventually goes quiet — it waits forever if it never does. Throttle assumes the input never stops — it guarantees regular action even under constant pressure. Match the tool to how the wind actually behaves.
+
// Bursty, with real gaps → debounce
+// Constant, unrelenting → throttle
+// "Search-as-you-type" → debounce
+// "Save every few seconds" → throttle
+
+