The power of RXJS's combineLatest operator

Upon using the combineLatest operator, I encountered an unexpected response when adjusting the interval duration of the first and second observables.

Here is an example of the code:

let intObs1$ = interval(1000).pipe(take(3));
    let intObs2$ = interval(500).pipe(take(3));
    combineLatest([intObs1$, intObs2$,]).subscribe(([intObs1, intObs2]) => {
      console.log(intObs1, intObs2);
    })`

The output displayed in the console is as follows: 0 0 0 1 1 1 2 1 2 2

However, upon making slight modifications:

 let intObs1$ = interval(500).pipe(take(3));
    let intObs2$ = interval(1000).pipe(take(3));
    combineLatest([intObs1$, intObs2$,]).subscribe(([intObs1, intObs2]) => {
      console.log(intObs1, intObs2);
    });

The new output in the console is as follows: 1 0 2 0 2 1 2 2

I am curious as to why the second script does not emit the initial values of Zero/Zero. Any insights or explanations would be greatly appreciated.

Answer №1

The explanation provided in the documentation sheds light on this matter. The function combineLatest requires all sources to emit before producing any output. If one source emits multiple values before another starts, the early values are disregarded. This behavior is impacted by timing and can result in different outcomes when running multiple times.

https://rxjs.dev/api/index/function/combineLatest

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

Displaying elements based on the selected mat-radio-button

I'm struggling with the logic to show and hide elements based on the selected radio button. Here's my current pseudocode: <mat-radio-button [value]="0">BUTTON A</mat-radio-button> <mat-radio-button [value]="1&quo ...

Enhance the functionality of Spartacus CMS component with a new extension library

I am currently working on developing an Angular library that enhances the functionality of the product-images component within the product details page of Spartacus. Upon customizing a CMS component, I have realized the necessity to include code lines sim ...

How can I customize a default button in HTML to hide the selected option from the dropdown menu?

Hey there! I'm currently working on a website that needs to be bilingual, with Spanish as the default language. I want to include a dropdown button that allows users to translate the content into English. Here's what I've tried so far: ...

There are no connection events being triggered - using Mongoose version 4.7.1 with Express

My current struggle involves establishing a connection from my express app to MongoDB via Mongoose. Despite the simplicity of the setup, which is as basic as it gets: var mongoose = require('mongoose'); mongoose.connect('mongodb://localhos ...

What is the best way to shift focus to the next input field once the character limit has been reached, especially when the input is contained

My challenge lies in having six input fields arranged side by side in a single row: In my component.html file: onDigitInput(event: any) { let element; if (event.code !== 'Backspace') element = event.srcElement.nextElementSibling; consol ...

I'm having trouble inputting text into my applications using React.js and TypeScript

I am encountering an issue where I am unable to enter text in the input fields even though my code seems correct. Can anyone help me figure out what might be causing this problem? Below is the code snippet that I am referring to: const Login: SFC<LoginP ...

Guide on implementing hover effects in React components

Within my component SecondTest, I have defined an object called useStyle which sets the background color to red. Is it feasible to add a hover effect to this object? const useStyle = { backgroundColor: "red", }; function SecondTest() { return < ...

Concealing Redundant Users in Entity Framework

I am faced with the task of sorting through a database containing over 4000 objects, many of which are duplicates. My goal is to create a new view that displays only one instance of each element based on the first and last name. I have already implemented ...

Trouble arises with kids when trying to adjust the display to block mode

I need to set all the div elements inside the div with id "editor" to display as block. However, when I change the display property of the div with id "editor", only that specific div's display is affected, while everything else inside the div becomes ...

Rotating an SVG shape a full 360 degrees results in no visible change

Currently, I am utilizing d3.js for a project and encountering an issue with rotating an SVG element 360 degrees to achieve a full spin back to its original position. If I rotate the element 3/4 of the way using the following code snippet, it works effect ...

Utilizing Google Sheets as a secure, read-only database for Angular applications without the need to make the sheet accessible to the

Seeking a way to utilize Google Sheets document as a read-only database for my Angular application, I have attempted various methods. However, the challenge with all these approaches is that they necessitate public sharing of the Sheet (accessible to anyon ...

A unit testing tool in Javascript that does not function properly when in strict mode

Is it possible to perform unit testing on code that is not in strict mode? Many popular testing frameworks, such as mocha and jest, require strict mode. However, I need to use eval in my code which necessitates a non-strict mode scope that cannot be easi ...

Exploring the functionality of negative numbers within chartist.js

Is there a way to display negative numbers in chartist.js? It seems that the library does not support negative numbers. Here is my code: var _4date = 'D'; var _3date = 'C'; var _2date = 'B'; va ...

Adding HTML and scripts to a page using PHP and JS

Currently, I am utilizing an ajax call to append a MVC partial view containing style sheets and script files to my php page. Unfortunately, it seems that the <script> tags are not being appended. After checking my HTTP request on the network, I can ...

Creating a large and spacious modal in Angular using ngx-bootstrap

I need help with resizing the ngx-modal to cover a large area of the screen. Currently, I am trying to make it so that when something is clicked, the modal should overlay an 80% width grid on a full desktop screen. Despite my attempts at using .modal-xl an ...

The Kendo grid row mysteriously vanished while trying to edit it immediately after inserting a new row

I have configured a Kendo grid in the following manner, but I am encountering an issue where after adding a row, it disappears when I attempt to edit it before sending the changes to the server. However, upon refreshing the page, the row reappears. Any i ...

select specific region within image

I'm currently working on cropping an image and sending the cropped data to the server side. To achieve this, I am utilizing the imgareaselect plugin. While I am able to obtain the coordinates of the selection, I am facing challenges in actually croppi ...

Using Selenium in Java, one can wait for a JavaScript event (such as onchange) to finish before proceeding

When a group of interconnected input fields have an onchange event, the values in some fields are updated correctly while others are not due to interference from the onchange event. Once the onchange event is triggered on a field, it initiates a process t ...

JavaScript debugging causing system freeze

Currently, I am working on a project that involves using MVC and dropdown lists. My issue arises when the dropdown list changes, as there is some javascript code that needs to execute. To troubleshoot the problem of the system locking up every time I tried ...

How can I navigate between pages without losing the data entered in the form fields

Is there a way in Ajax or jQuery to save form data and navigate between multiple form pages without using PHP Sessions? I want the form data to be saved until the user submits it, and when they do submit, all information from different pages should be in ...