heavy-computation.js

100%

heavy-computation.js

✓ Published0🌍 Public

Last edited Nov 22, 2014

Created on Nov 22, 2014

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.

AI-generated description

Similar vizzes

Loading thumbnail…

heavy-computation-settimeout.js

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`.

Aalessioalex

88% 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

62% match

Loading thumbnail…

JS Bin

This example demonstrates a live counter that updates every second, displaying the number of elapsed seconds in the browser and the console. It uses RxJS’s `Observable.timer` to emit sequential integers, which are mapped to formatted strings. The resulting data stream is subscribed to by two effects: a DOM effect that writes the text into a `#app` container, and a console effect that logs each message. The code separates the main data stream from its side effects, following a simple functional reactive programming pattern.

JJaxonDvl

61% match

Loading thumbnail…

JavaScript Exercise

This example demonstrates basic JavaScript array manipulation with console output, displaying results for range generation, summation via reduce, and filtering even numbers. The page renders a large “Hello HTML!” message using CSS styling with a 13em font size. The code defines a custom `range` function that creates an array of sequential integers, then applies `Array.prototype.reduce` and `Array.prototype.filter` to compute a sum and extract even values. The HTML structure uses a single div element with a message class, combining static markup with dynamic script execution in the browser console.

Jjexchan

61% match

Loading thumbnail…

Gist 1075489a3f6f94d13b2ab76cff4c7cea

This example visualizes the asynchronous execution order of Node.js operations by logging their completion times relative to a shared start timestamp. It uses Node’s `https.request` to fetch Google’s homepage, `crypto.pbkdf2` for four CPU-intensive password hashes, and `fs.readFile` to read a local file. The console output reveals how the event loop interleaves I/O callbacks, with the network request finishing before the file read and hash computations, illustrating the non-blocking concurrency model.

Aamazingandyyy

61% 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

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…

Bats plus React useMemo

This example demonstrates how React’s `useMemo` hook caches expensive computations, affecting performance when a counter increments. It displays a number `I` that increases on button click, alongside calculated prime numbers and the time taken to compute them. The code uses `React.useState` and `React.useMemo` within a functional component, and a custom `doPointlessComputationsWithBlocking` function from intensive.js performs blocking prime-number calculations. The `useMemo` dependency array is empty, so the heavy computation runs once on initial render, highlighting how memoization prevents repeated work during subsequent state updates.

Ttanvee gujral

60% match