The Old NetISSUE #51 of 60

timing · setTimeout · setInterval · clearTimeout

Pixel PeteVSQuirks Mode

Pixel Pete saysTimers — setTimeout, setInterval — schedule code, the backbone of classic DHTML animation.

setTimeout(fn, ms) runs once after a delay; setInterval(fn, ms) repeats; cancel with clearTimeout/clearInterval using the returned id. Old DHTML animated by changing style on an interval. For smooth visual animation today, requestAnimationFrame is better — but timers still rule for delays, polling, and debouncing.

Power-ups you unlock

setTimeout once; setInterval repeats
Cancel via clearTimeout/clearInterval(id)
Old DHTML animated via setInterval + style
rAF is better for visual animation now

Quirks Mode attacks — common mistakes

Never clearing an interval (runs forever)
Using setInterval for smooth animation (drifts)
Assuming exact timing from delays

Boss battleRun a 5-step countdown with setInterval and clear it at zero.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre id="o"></pre>
<script>let n=5;const o=document.getElementById('o');const id=setInterval(()=>{o.textContent=n;if(n--<=0){clearInterval(id);o.textContent='done';}},300);</script></body></html>

▶ Open the interactive comic issue

‹ Window Events · Load · Resize · Scroll Show / Hide Patterns · Display · Visibility ›