Exploring the depths of Rx.ReplaySubject: Techniques for delaying the `next()` event

Question

Exploring the depths of Rx.ReplaySubject: Techniques for delaying the `next()` event

Confused Mind: Either I'm mistaken, or the whiskey is starting to take effect. (I can't rule out the possibility that I'm just going crazy. Apologies for that.)

Assumption:

My assumption was that ReplaySubject would emit a single value every 2 seconds because I wait two seconds before calling next() each time.

Outcome:

However, all values are actually output simultaneously after waiting for 2 seconds.

The problematic code snippet is as follows:

import { ReplaySubject } from 'rxjs';

export const rs$: ReplaySubject<number> = new ReplaySubject();

rs$.subscribe({
  next: (data) => console.log(data),
  error: (error) => console.warn(error),
  complete: () => console.log('ReplaySubject completed'),
});

const fakeAPIValuesOne: Array<number> = [7, 11, 13];

fakeAPIValuesOne.forEach(async (entry: number) => {
  await wait(2000);  // <--- Why does wait() not work?
  rs$.next(entry);
});

function wait(milliseconds: number) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}

Query:

What am I fundamentally misunderstanding in this scenario?

If you want to test it yourself: https://stackblitz.com/edit/rxjs-wpnqvq?file=index.ts

UPDATE 1:

Using setTimeout also doesn't seem to make any difference. The following modified code results in the same behavior as before:

fakeAPIValuesOne.forEach((value: number) => {
  setTimeout(() => {
    rs$.next(value);
  }, 2000);
});

I'm puzzled by how next() manages to override all the delays here?

UPDATE 2

The issue has been resolved, correct answer identified, thank you! You need this setup to enable root level awaits for your ts-files.

package.json

Please pay attention to the type section:

{
  "name": "playground",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "start": "nodemon index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "rxjs": "^7.5.5",
    "ts-node": "^10.7.0",
    "typescript": "^4.8.0-dev.20220507"
  },
  "type": "module"
}

nodemon.json

Please use the following configuration to avoid the error:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"

{
  "execMap": {
    "ts": "node --loader ts-node/esm"
  }
}

Lastly, update your tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "noEmit": true,
    "strict": true,
    "lib": ["esnext", "DOM"]
  }
}

javascript typescript rxjs top-level-await replaysubject

Answer 1

Answer №1

Extracted from the Mozilla Web Docs, the following note provides important information regarding the use of forEach:

Note: When utilizing forEach, it is crucial to remember that it expects a synchronous function.

forEach does not wait for promises to resolve. It is essential to understand the potential implications when incorporating promises (or async functions) within the callback of forEach.

It must be noted that the issue at hand does not pertain to the ReplaySubject; rather, it signifies that forEach is incompatible with this particular scenario.

Cheers

EDIT: Issue Resolved

import { ReplaySubject } from "rxjs";

export const rs$ = new ReplaySubject();

rs$.subscribe({
  next: (data) => console.log(data),
  error: (error) => console.warn(error),
  complete: () => console.log("ReplaySubject completed"),
});

const fakeAPIValuesOne = [7, 11, 13];

// This approach will not work:
// fakeAPIValuesOne.forEach(async (entry: number) => {
//   await wait(2000);
//   rs$.next(entry);
// });


// However, the following method will succeed
for (const element of fakeAPIValuesOne) {
  await wait(2000);
  rs$.next(element);
}

function wait(milliseconds: number) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}

Answer 2

Extracted from the Mozilla Web Docs, the following note provides important information regarding the use of forEach:

Note: When utilizing forEach, it is crucial to remember that it expects a synchronous function.

forEach does not wait for promises to resolve. It is essential to understand the potential implications when incorporating promises (or async functions) within the callback of forEach.

It must be noted that the issue at hand does not pertain to the ReplaySubject; rather, it signifies that forEach is incompatible with this particular scenario.

Cheers

EDIT: Issue Resolved

import { ReplaySubject } from "rxjs";

export const rs$ = new ReplaySubject();

rs$.subscribe({
  next: (data) => console.log(data),
  error: (error) => console.warn(error),
  complete: () => console.log("ReplaySubject completed"),
});

const fakeAPIValuesOne = [7, 11, 13];

// This approach will not work:
// fakeAPIValuesOne.forEach(async (entry: number) => {
//   await wait(2000);
//   rs$.next(entry);
// });


// However, the following method will succeed
for (const element of fakeAPIValuesOne) {
  await wait(2000);
  rs$.next(element);
}

function wait(milliseconds: number) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}

Answer 3

Answer №2

It is important to note that expecting this code to work as intended may not always be realistic.

Take a look at the following example:

wait(2000);
wait(2000);
wait(2000);
console.log("Hello");

The message "Hello" will be printed immediately, without waiting for the total 6 seconds.

This behavior remains unchanged even when placed in a loop.

for (const n of [1,2,3]) {
  wait(2000);
}
console.log("Hello");

In this case, "Hello" will also be printed right away.

If you do not utilize .then() or await, the standard prediction is that the program will execute without any delays. Some APIs may automatically handle waiting, but it should not be assumed.

You must structure your code like this:

await wait(2000);
await wait(2000);
await wait(2000);
console.log("Hello");

Now there will be a 6-second delay before "Hello" is displayed on the console.

Consider the following scenario:

const createPromise = async (v) => {
   await wait(2000);
   console.log("Hello From createPromise: ", v);
}

createPromise(1);
createPromise(2);
createPromise(3);
console.log("Hello");

You will observe that the output remains instantaneous, followed by all promises resolving after a 2-second interval.

Hello
// 2 seconds wait
Hello From createPromise: 1
Hello From createPromise: 2
Hello From createPromise: 3

Notably, none of them pause for one another. This aligns with the expected behavior of promises. To ensure waiting for promise results, incorporate await or .then.

The correct approach would be:

await createPromise(1);
await createPromise(2);
await createPromise(3);
console.log("Hello");

Both loops yield similar outcomes, as anticipated - they do not introduce any delays.

for (const n of [1,2,3]) {
  createPromise(n);
}

[1,2,3].forEach(n => createPromise(n))

console.log("Hello");

Once again, the initial output will be "Hello" since no awaiting is implemented for the promise resolutions.

While the inner wait(2000) promise is awaited, the outer createPromise() promises are not, hence there is no delay.

for (const n of [1,2,3]) {
  await createPromise(n);
}

Answer 4

It is important to note that expecting this code to work as intended may not always be realistic.

Take a look at the following example:

wait(2000);
wait(2000);
wait(2000);
console.log("Hello");

The message "Hello" will be printed immediately, without waiting for the total 6 seconds.

This behavior remains unchanged even when placed in a loop.

for (const n of [1,2,3]) {
  wait(2000);
}
console.log("Hello");

In this case, "Hello" will also be printed right away.

If you do not utilize .then() or await, the standard prediction is that the program will execute without any delays. Some APIs may automatically handle waiting, but it should not be assumed.

You must structure your code like this:

await wait(2000);
await wait(2000);
await wait(2000);
console.log("Hello");

Now there will be a 6-second delay before "Hello" is displayed on the console.

Consider the following scenario:

const createPromise = async (v) => {
   await wait(2000);
   console.log("Hello From createPromise: ", v);
}

createPromise(1);
createPromise(2);
createPromise(3);
console.log("Hello");

You will observe that the output remains instantaneous, followed by all promises resolving after a 2-second interval.

Hello
// 2 seconds wait
Hello From createPromise: 1
Hello From createPromise: 2
Hello From createPromise: 3

Notably, none of them pause for one another. This aligns with the expected behavior of promises. To ensure waiting for promise results, incorporate await or .then.

The correct approach would be:

await createPromise(1);
await createPromise(2);
await createPromise(3);
console.log("Hello");

Both loops yield similar outcomes, as anticipated - they do not introduce any delays.

for (const n of [1,2,3]) {
  createPromise(n);
}

[1,2,3].forEach(n => createPromise(n))

console.log("Hello");

Once again, the initial output will be "Hello" since no awaiting is implemented for the promise resolutions.

While the inner wait(2000) promise is awaited, the outer createPromise() promises are not, hence there is no delay.

for (const n of [1,2,3]) {
  await createPromise(n);
}

Exploring the depths of Rx.ReplaySubject: Techniques for delaying the `next()` event

Answer №1

Answer №2

Similar questions

Retrieve a single value from a JavaScript array

What could be the reason for the discrepancy between the values displayed in the two alerts? What is causing this difference in

Javascript Rest for y moments

Is there a way to search for the keyword "/test/" within a lengthy string using Regular Expressions?

Updating the chosen option using jQuery

Require that the parent FormGroup is marked as invalid unless all nested FormGroups are deemed valid - Implementing a custom

Enhance the appearance of Ionic popups

Issue with displaying errors in vee-validate when using Vue.js Axios (More details provided)

Tips for Transferring Values Between Multiple Dropdown Menus with jQuery

In React, when a user clicks the back button on the browser window, ensure you pass props back to the originating component

Unable to retrieve jwt token from cookies

Incorporate a new CSS class into a DIV using JavaScript

What is the best way to implement Bootstrap 5 jQuery plugins in an ES6 project with Webpack?

Ways to store data in the localStorage directly from a server

Is it possible to close the navigation menu by clicking on a link or outside of the navigation area?

Utilizing the Jquery click function to assign an element as a variable

Having difficulty modifying the styling of a paragraph within a div container

Include the name of the uploaded attachment in the textarea before hitting the submit button

Updating a component (`AddBudgetModal`) while rendering a different component (`App`) is not possible. To identify the incorrect setState() call within the `AddBudgetModal` component

Pass information captured from Mat Dialog up to the main component