setTimeout/setInterval experiment involving slow-downs

100%

setTimeout/setInterval experiment involving slow-downs

✓ Published0🌍 Public

Last edited Aug 13, 2017

Created on Aug 13, 2017

This example demonstrates how `setTimeout` and `setInterval` differ in their behavior when a callback runs longer than the specified interval. It shows that `setInterval` can queue overlapping calls, while `setTimeout` waits for the previous execution to finish. The visualization uses a counter and a select menu to switch between the two methods, with a checkbox to artificially slow down the `tick` function via a blocking `while` loop. The code relies on D3.js v4 for DOM selection and event handling, and uses `window.setTimeout` and `window.setInterval` to schedule the counter updates. The counter increments by 0.5 every 500 milliseconds.

AI-generated description

setTimeout vs. setInterval experiment involving slow-downs.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Eloquent JS: Chapter 11

This example visualizes asynchronous programming concepts from Chapter 11 of Eloquent JavaScript using D3 v5. It renders a heading and an SVG canvas that uses d3.forceSimulation to demonstrate how JavaScript handles concurrent tasks. The visualization shows tick intervals with setTimeout, promise resolution ordering, and blocking code execution timing, all represented through animated SVG elements. The code displays timing diagrams showing when setTimeout callbacks and Promise.then handlers execute relative to synchronous code, using D3's force layout to arrange nodes and animated transitions to illustrate event loop behavior over time.

Eemberix@gmail.com

69% match

Loading thumbnail…

D3 Starter - Asynchronus

This example demonstrates asynchronous programming in JavaScript using Promise objects and the `setTimeout` API, showing how to handle operations that take time to complete. The code defines a `waitSeconds` function that returns a Promise resolving after a specified delay, then chains `.then()` to log a message once the time has elapsed. Using D3 v6 loaded from a CDN, the page includes explanatory text about asynchronous versus synchronous behavior, with no data visualization or rendering involved—the focus is purely on illustrating the callback and Promise patterns.

Mmaxthamt

65% match

Loading thumbnail…

Stopwatch

A digital stopwatch displays elapsed time in hours, minutes, and seconds, updating every second with a monospace font. The page uses D3.js selection and formatting APIs—specifically `d3.select` and `d3.format`—to update the text content of the body element. A `setInterval` callback increments a counter each second, and the formatted time is rendered as a colon-separated string.

CCurran Kelleher

64% match

Loading thumbnail…

Hello VizHub

This example demonstrates asynchronous programming patterns using JavaScript Promises, with text updates appearing sequentially in two HTML divs. It shows how a chain of `Promise` objects, created through the `setTimeout` function, executes one after another, updating the visual output after each one-second delay. The visualization uses D3.js v5 through the `select` function to modify text content, while a separate module file exports an unused string constant. The styling relies on the Ubuntu font from Google Fonts with a dark background and light text, though the core interaction is purely timing-based rather than data-driven.

Aasimplesinger

63% match

Loading thumbnail…

setInterval

A 10×10 grid of circles animates smoothly, with each circle’s radius oscillating according to a sine wave that shifts over time. Built with React and D3 v7, the visualization uses `setInterval` to update the frame every 16.6 milliseconds, generating new data via `Math.sin` and binding it through `selectAll` and `.join`. The SVG rendering redraws all circles each tick, with black fills and positions determined by row and column spacing.

MMark Lam

62% match

Loading thumbnail…

Immediate Transitions

This example demonstrates how to force D3 transitions to complete instantly by overriding `requestAnimationFrame` and `Date.now`. The code uses D3 v3’s `d3.select("body").transition()` with a five-second duration to animate the background to red, but then intercepts animation frame scheduling and advances the clock to infinity, causing the transition to jump immediately to its final state. The browser’s animation loop is bypassed, and the synchronous flush executes all pending callbacks at once.

Mmbostock

62% match

Loading thumbnail…

D3 selection exploration

This example demonstrates how D3 selections manage dynamic data updates through animated circles. It uses `d3.select`, `d3.range`, and the selection’s `.data()`, `.join()`, and `.attr()` methods to bind changing arrays of position and radius values to SVG circle elements. A `setInterval` loop updates the data at 60fps, with positions and sizes driven by sine functions, causing circles to appear, disappear, and shift smoothly. The code highlights both loose coupling of data to visual attributes and the modern `.join()` API for enter/update/exit handling.

BBart van Pelt

62% match

Loading thumbnail…

D3 Selection Exploration

This example demonstrates D3 selections with animated circles that move sinusoidally across the screen. Using the `d3.interval` timer, it updates an SVG `circle` element per frame, binding data with `.data()` and a key function, then applying `.join('circle')` to handle enter, update, and exit states efficiently. The code relies on D3 v7’s `select` and `range` utilities, rendering to SVG with `attr` calls for position and radius.

Jjexchan

62% match