The RxJS race function comes to a standstill if neither stream completes

Consider the code snippet below:

import { interval, race, Subject } from 'rxjs'; 
import { mapTo } from 'rxjs/operators';

const a$ = new Subject<number>();
const b$ = interval(1000).pipe(mapTo(1));
race([a$, b$]).subscribe(console.log);
a$.subscribe({complete: () => console.log('a$ completed!')});

[1,2,3,4,5,6,7].map(i => a$.next(i));

When running this code, the output in the console is shown as 1...7. Initially, my expectation was to see an output of 1, 2, 3, 4, 5, 6, 7, followed by multiple occurrences of value 1 from observable b$. However, it seems that after all values are emitted from array a$, the values from b$ do not get passed. So, why is this happening? Does the race operator somehow recognize that a$ has finished emitting values, preventing b$ from continuing?

Answer №1

When all values from the array have been emitted through a$, why do the values emitted from b$ not pass through?

The answer to this question lies in the official documentation of the race operator.

This operator selects the observable that emits first.

Due to the immediate execution of the map function on your array, it finishes before any emissions from b$, causing a$ to always "win" the race and be logged to the console. As a result, b$ never wins nor completes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for concealing tick labels in d3 using TypeScript

When trying to hide tick labels by passing an empty string to the .tickFormat("") method, I encountered an issue with Typescript. The error message received was as follows: TS2769: No overload matches this call. Overload 1 of 3, '(format: null): Axi ...

Testing Angular 2 components with material icons and images

Recently, I finished creating a unique component that showcases an image, material icons, and a custom directive known as ticker. This directive allows for scrolling text if it exceeds the width of the element. https://i.stack.imgur.com/GpDSr.png My next ...

Contrast between categories and namespaces in TypeScript

Can you clarify the distinction between classes and namespaces in TypeScript? I understand that creating a class with static methods allows for accessing them without instantiating the class, which seems to align with the purpose of namespaces. I am aware ...

Guide to executing Jest tests with code coverage for a single file

Instead of seeing coverage reports for all files in the application, I only want to focus on one file that I am currently working on. The overwhelming nature of sifting through a full table of coverage for every file makes it difficult to pinpoint the spe ...

Addressing ESLint and TypeScript Issues in Vue.js with Pinia: A comprehensive guide

Experiencing difficulties with Vue.js + Pinia and need assistance to resolve these issues. Error: 'state:' is defined but never used. Here is the snippet of code located in @/stores/user.ts. import { defineStore } from 'pinia' export ...

How do I go about mocking a function from a third-party nodejs module when using TypeScript with jest?

I need help with mocking a function from a third-party node module in jest, specifically the fs.readFileSync() function. I have come across several examples online, but I haven't found one that incorporates TypeScript. To illustrate my question, I hav ...

Unusual Behavior of *ngIf and jQuery in Angular 5: A curious case

I'm encountering a strange issue when using the expand-collapse feature of Bootstrap 4 with *ngIf for expansion and collapse. I noticed that the jQuery doesn't work when *ngIf is used, but it works fine when *ngIf is removed. HTML: <div cla ...

Encountering an error in Angular 2: "date.getMonth is not a function

I am currently utilizing the Angular-2-datepicker in my project. Everything seems to be functioning properly, but whenever I attempt to set the [(date)] attribute, an error is thrown. An error stating that date.getMonth is not a function keeps popping u ...

Connect a click event from one component to another component

Can Angular bind a click event dynamically from a component to another existing component on the page? Check out this image for reference. In my app, I have 4 simple components - a shell component that defines the layout, a header component (blue outline) ...

Error encountered: NextJs could not find the specified module, which includes Typescript and SCSS

I am in the process of migrating a Next.js application from .js to .ts and incorporating ScSS. The first error I encounter is during 'npm run dev'. However, when I try 'npm run build', different issues arise that do not seem related to ...

Is there a way for me to retrieve the header values of a table when I click on a cell?

I have a project where I am developing an application for booking rooms using Angular 2. One of the requirements is to be able to select a cell in a table and retrieve the values of the vertical and horizontal headers, such as "Room 1" and "9:00". The data ...

Error429 was received from a GET request made to the Imgur API

Encountering a Request failed with status code 429 error from the Imgur API despite using a new Client_ID that hasn't been used before, Here is my Api.ts: const imgurClientId = process.env.NEXT_PUBLIC_Client_ID const BASE = "https://api.imgur. ...

Acquiring information from file within component operation

When a user drags and drops a file, how can I retrieve it from the drop event? HTML file <div (drop)="drop($event)" > drop file here </div> TS file drop (event) { console.log(event.target.files.length); // I need to retrieve the file her ...

Angular service is continuously throwing the error message "NullInjectorError: No provider for anotherService"

I recently built a basic Angular service and encountered an issue. @Injectable() export class someHandler { constructor( public anotherService: anotherService, ) {} ... The problem arises when I try to use this service in a component, as ...

What is the correct way to implement a validation pattern in Angular2 to prevent users from entering only spaces in an

I am using formBuilder in Angular2 and need to implement a validation pattern to prevent input that consists of only spaces. ...

"Using rxjs, a value is delivered within the subscribe function

function createSingleMapService(mapServiceFactory) { return mapServiceFactory.switchSingleMapService().subscribe((service)=>{ return service }) } This snippet is a factory function in Angular that creates a single map service. The 's ...

What is the mechanism behind Typescript interface scope? How can interfaces be defined globally in Typescript?

I'm diving into the world of Typescript and Deno, but I'm struggling to understand how interfaces scopes work. Here's the structure of my application: The first layer (App.ts) contains the core logic of my application. This layer can refer ...

Tips for incorporating external AMD modules with Angular2 using WebPack

In my current project using Angular2, TypeScript, and WebPack, I am looking to incorporate the Esri ArcGIS JavaScript API. The API can be accessed from the following URL: By importing Map from 'esri/Map';, I aim to import the corresponding modul ...

hiding html elements by using the display property set to none instead of physically removing

I am currently utilizing an if-else statement to display different HTML structures. As a result, the entire HTML is being rendered twice. Is there a way we can utilize 'display: none' instead? I attempted to use it in th ...

What is the process of including items in an Array?

I have been attempting to use the push method to add elements to an Array in Typescript, but strangely it doesn't seem to be working. The array just stays empty. Here's the code I have: list: Array<int> = Array(10) for(le ...