run promises sequentially or not using observables

100%

run promises sequentially or not using observables

✓ Published0🌍 Public

Last edited Dec 28, 2022

Created on Dec 28, 2022

This example demonstrates how to execute arrays of promises sequentially or in controlled batches using RxJS observables. It shows a stream of numeric values piped through operators like `map`, `defer`, and `mergeAll` with a concurrency limit of 1, ensuring each promise resolves before the next starts. A second variant uses `bufferCount(3)` to group the input into batches of three, still processing them one batch at a time. The `delay` helper creates promises that log their resolved values to the console, with a final `console.log('done')` indicating stream completion.

AI-generated description

Similar vizzes

Loading thumbnail…

Sequential execution of Promises using reduce()

This example demonstrates sequential execution of asynchronous Promise chains in JavaScript. It shows how the `reduce()` method orchestrates a collection of async tasks so each completes before the next begins, producing an ordered final result. The code uses native JavaScript Promises, the `Promise.resolve()` initializer, and `setTimeout()` to simulate time-based async work. The data source is the hardcoded array `[1, 2, 3]`, with each item’s delay proportional to its value. The rendering is purely console-based, logging each step and the final accumulated array via `console.log`.

FFrozenfire92

67% match

Loading thumbnail…

RxJS buffer function calls

This example demonstrates how RxJS can batch function calls into buffered groups using the `Subject` API. The code creates a `bufferTime` operator that collects invocations over 500 milliseconds, up to a maximum of three items, before emitting them as an array. A custom `batchify` helper subscribes to the buffered observable and logs each batch of arguments before passing them to the target function. The main loop asynchronously invokes the batched function with increasing numbers, then quickly fires three more calls to trigger a final buffered output.

RRestuta

65% match

Loading thumbnail…

Async/await 6

The example shows an asynchronous JavaScript flow where the program awaits one operation, then runs two independent tasks in parallel via `Promise.all`. The code displays `doA()`, followed by `doB(a)` and `doC(a)` as the two concurrent calls after the first result resolves. It uses native `async`/`await` syntax with `Promise.all()` to coordinate these dependent and independent steps. No rendering library or data source is visible; the visualization focuses purely on the sequence and branching of these promises.

PPanJ

64% match

Loading thumbnail…

Basic promise structure

This example demonstrates a basic promise chain controlling sequential execution of asynchronous functions triggered by a user click. It shows how JavaScript Promises manage ordered flow, with each function logging its completion status before resolving. The code uses native Promise constructors and the `.then()` method to chain `function1()`, `function2()`, and `function3()` after an initial `initialFunction()`. The interaction is tied to a jQuery click handler on `#loadAudio`, and all resolutions print colored console messages via `console.log`. No data sources or visual outputs are involved; the focus is purely on the control-flow pattern.

LLayne Smith

64% match

Loading thumbnail…

Async/await 5

This example visualizes the flow of a sequential asynchronous function, showing how each awaited promise resolves in a chain before the next begins. The code defines an `async` function with three sequential `await` calls—`doA()`, `doB(a)`, and `doC(b)`—where each step passes its result into the next. The visualization maps this dependency chain, highlighting the blocking nature of each await and the data handoff between stages. It relies on JavaScript’s native `async`/`await` syntax, with no external libraries, and renders a linear timeline of the function’s execution order.

PPanJ

63% match

Loading thumbnail…

async-for-each

This example demonstrates a sequential asynchronous loop over an array, where each item is processed only after the previous callback completes. It shows how `asyncForEach` awaits a user-provided callback that delays execution using a custom `waitFor` promise wrapper around `setTimeout`. The code uses the native `async`/`await` syntax and a `for` loop to ensure the array `[1, 2, 3]` is logged in order, with a one-second pause between each item. The visible data source is a hardcoded array in the `start` function, and the rendering approach is console output.

AA6Brgeuka

63% match

Loading thumbnail…

RxJS Switch Map

This example demonstrates the behavior of RxJS’s `switchMap` operator when combined with a custom sorter function that merges values from two observable streams. The code creates two observables emitting numbers (1,2,3 and 40,50,60) and passes them through `switchMap` with a `createSorter` callback that accumulates, sorts, and pops values from an internal list. Each emitted value is logged to the console, showing how `switchMap` switches between the source observables while the sorter maintains state across emissions. The gist uses RxJS’s `Observable.of` and `subscribe` methods.

RRestuta

59% match

Loading thumbnail…

Async/await 4

This example visualizes JavaScript promise chains as animated, interactive force-directed graphs using D3’s `d3.forceSimulation`. The code shows two parallel promise sequences—one resolving `doA`, `doB`, and `doC` sequentially, and another matching a separate `do()` function—each drawn as nodes and links on a canvas. The graph uses D3’s force layout to position nodes, with links updating in real time as promises resolve. The rendering relies on D3’s canvas API, and the data source is the hardcoded promise structure from the gist, not external input. The animation communicates the order and dependency of asynchronous calls.

PPanJ

58% match