setInterval or rxjs interval which one to use?

Question

There are lot of discussions on this topic but still i am not able to figure out which one i need to use for my usecase. I have a method that needs to be called every 3 seconds to get updated stock details .

ngOnInit() {
  
  this.getUpdatedStock(); // to get data while loading page for first time
  this.interval = setInterval(()=> {
    this.getUpdatedStock();
   },3000)

}

whereas getUpdatedStock() calls the service and do some manipulations before rendering data .

getUpdatedStock(){
   this.stockService.getStockData().subscribe((data)=> {
   this.latestStock = data ;
   // few lines of code to highlight table headers based on response
})}

As expected the setInterval() , the request gets stacked up if there is delay in response and also the calls are not happening after 3 seconds since the last response is received . Then i found following thread which explains the use of rxjs methods

Why would I use RxJS interval() or timer() polling instead of window.setInterval()?

There also some suggestions been made not to go with rxjs for that usecase as it may increase bundle size . Now i am thinking of which one to use for my usecase . I dont want calls to happen until i receive response from previous request and it should 3 seconds since i received the response . Is it possible to do with setInterval() itself or i have to go with rxjs . If i have to go with rxjs timer() or interval() can someone please tell me how that can be done as i am not calling the service directly . I am calling method within which service call is triggered and data manipulations are done .

Answer 1

An RxJS solution:

RxJS does make this sort of thing really easy. Also, you mostly just get increased bundle size based on what you use. I'll leave the deliberation up to you and show you I would implement this with RxJS.

Here I merge a silent timer with your getStockData. The timer just ensures that the merged observable does not complete before 3 seconds. If getStockData takes more than 3 seconds, the timer is ignored.

Then I repeat this for forever.

ngOnInit() {
  
  merge(
    this.stockService.getStockData(),
    timer(3000).pipe(filter(_ => false))
  ).pipe(
    repeat(),
  ).subscribe({
    next: this.updateStock
  });

}

updateStock(data){
  this.latestStock = data;
  // few lines of code to highlight table headers based on response
}

---

Update # 1:

Explaining filter:

timer(3000) will emit the number 0 after 3 seconds. We actually don't want the timer to emit anything. It's just there as a lower-bound on the length of your observable. So, in order to stop it from emitting any values, we silence it by filtering everything.

filter(_ => false) says "no matter what the value is, do not allow it to pass".

timer(3000).pipe(filter(_ => false)) will emit nothing and then send complete event.

The effect here is that even if this.stockService.getStockData() takes 1 second to complete. The merge will still wait and 2 seconds (for a total of 3 seconds) before the merged streams complete. On the other hand, if this.stockService.getStockData() takes more than 3 seconds to complete, then the merged streams will complete immediately after this.stockService.getStockData() completes.

Explaining repeat:

repeatWhen(a => a) is actually the same as just using repeat(). I used the first because I thought you had to give repeat a number, but you don't.

Repeat does exactly what it sounds like it does. When the source stream completes, it just re-starts it again. repeatWhen gives you some fine-grained control over that process, but you don't need it given what you've described.

---

Update # 2:

Are you talking about just repeating after a delay of 3 seconds?

Whenever stockService.getStockData() completes, this will wait 3 seconds and then call stockService.getStockData() again.

This means if the first call to stockService.getStockData() takes 5 seconds, then the second call happens at 8 (5 + 3) seconds.

ngOnInit() {

  this.stockService.getStockData().pipe(
    repeatWhen(co => co.pipe(
      delay(3000)
    )),
  ).subscribe({
    next: this.updateStock
  });

}

updateStock(data){
  this.latestStock = data;
  // few lines of code to highlight table headers based on response
}