Skip to main content
100%

heavy-computation-settimeout.js

✓ Published0🌍 Public
Aalessioalex
Last edited Nov 22, 2014
Created on Nov 22, 2014

This animation demonstrates how a long-running computation can be broken into chunks without freezing the event loop. The code repeatedly computes the sum of even numbers up to 199,999,999, processing one million numbers per iteration via a `setTimeout` callback to yield control. A separate `setInterval` logs "I'm alive!!" every 200 milliseconds, proving the process remains responsive. The script uses plain JavaScript timers and a recursive `getSum` function, with progress logged to the console and timing measured via `console.time` and `console.timeEnd`.

AI-generated description

Similar vizzes

Loading thumbnail…

heavy-computation.js

This example demonstrates the blocking behavior of a single-threaded JavaScript event loop. A heavy computation—summing all even numbers up to 199,999,999—runs synchronously inside `displaySum`, which prevents a concurrent `setInterval` callback from logging "I'm alive!!" every 200 milliseconds. The code measures the sum’s duration with `console.time` and `console.timeEnd`, showing that the interval remains silent until the loop finishes. It highlights the challenge of keeping a UI or process responsive during CPU-intensive tasks, a limitation relevant to both browsers and Node.js.

Aalessioalex
88% match
Loading thumbnail…

setTimeout/setInterval experiment involving slow-downs

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.

HHerst
62% match
Loading thumbnail…

Gist 0f0c45136069ee6e7366afef684f3373

This animation cycles through the digits of pi, displaying each digit one at a time in a console. The digits are sourced from a remote JSON file containing the mathematical constant. The code uses the `fetch` API to retrieve the data, `console.clear()` and `console.log()` for output, and a `setInterval` timer to control the pace of the digit display.

MMAKIO135
62% match
Loading thumbnail…

A utility function, for Greasemonkey scripts, that detects and handles AJAXed content.

The animation shows the recursive polling logic of the `waitForKeyElements` utility, which scans for AJAX-injected DOM nodes matching a jQuery selector. It displays the function’s timer-driven loop, where `setInterval` repeatedly checks for target nodes every 300 milliseconds, invoking the callback action on newly discovered elements. The visualization highlights how the function tracks already-processed nodes using jQuery’s `.data()` method and manages its control object to clear or reset timers based on the `bWaitOnce` flag. The code relies on jQuery selectors and traversal methods, with optional iframe support via `.contents().find()`.

Aanemochore
61% match
Loading thumbnail…

Number transformation with data

The visualization animates a large number, starting at zero and counting upward to a hardcoded value of 3252, with commas added for readability. A single headline element repeatedly transitions through this count over five seconds, then pauses for 1.5 seconds before restarting in an infinite loop. The code uses D3 v4’s `transition`, `d3.active`, and `tween` with `d3.interpolateNumber` to smoothly interpolate the numeric text, while `d3.format(",d")` applies the comma grouping. The data source is a fixed constant in the script, and the rendering relies entirely on D3’s DOM manipulation and animation APIs.

AAbin
60% match
Loading thumbnail…

solution for http://toys.usvsth3m.com/javascript-under-pressure/ - ugly code

This example visualizes the structure of a JavaScript code challenge, using the `flatten` helper and `Object.prototype.toString` to identify nested arrays and numbers. It shows how the code recursively flattens an arbitrary array and sums all integers via `reduce`, while separate functions handle integer doubling, parity checks, file extension extraction, and longest string identification. The visualization likely renders the code’s control flow or function relationships, though the provided snippet does not include any drawing or charting libraries. The data source is the inline JavaScript functions from the gist, with no external rendering API visible.

TTBD
60% match
Loading thumbnail…

Gist 3745f53a79313afd139b4eb0a4e97bd2

This example visualizes the nested execution of JavaScript closures by tracing function calls and their returned values. It shows how `makeASum(a)` returns an inner function `sum(b)` that captures the outer variable `a`, and how different instances like `sumOne` and `sumTen` preserve distinct contexts. The rendering uses a custom SVG-based trace, likely driven by D3’s `d3.forceSimulation` for layout and `d3.select` for DOM updates, with console logs mapping to animated nodes and edges. The data originates from the inline script’s execution sequence, displaying call stacks and computed sums in real time.

MMistyBlunch
60% match
Loading thumbnail…

JS Countdown Timer

A jQuery-based countdown timer displays the time remaining until a specified end date, broken into days, hours, minutes, and seconds. The animation updates every second using `setInterval`, calculating the elapsed time from the current `Date` against the `data-end-date` attribute. It then writes the padded two-digit values into the corresponding `.CountdownTimer-time` elements for each time unit, with plural labels appearing automatically.

Aamoradi
60% match