CODEWITHSUNDEEP
angularrxjsobservable
sanjihan
sanjihan

Reputation: 5992

Rxjs: How to use bufferTime while only triggering an emission when new values have arrived

I am using bufferTime to react to resize events:

this.resizeSubject.pipe(bufferTime(100)).subscribe((data)=>{
  console.log(data);
});

data is generated on window resize:

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    let innerWidth = event.target.innerWidth;
    this.resizeSubject.next(innerWidth);
  }

The problem with is that bufferTime emits a value (empty array) every 100ms even though next was not called. I could do a comparison in the subscribe function, but I imagine there must be an option to release the buffered value after 100ms only if a new value arrived. If next was called 10 times in 100ms, the expected emitted value is just one array of 10 items. If after that next is not called, the subscriber is given no new data.

What option should I use to tell rxjs that it should emit every 100ms only if a new value has arrived?

Upvotes: 1

Views: 463

Answers (2)

kellermat
kellermat

Reputation: 4495

Depending on your use case, auditTime might be the simplest solution. auditTime is similar to bufferTime, but only releases the last value that arrived within the defined time frame, and if no value arrived, no value is emitted:

this.resizeSubject.pipe(
    auditTime(100)
)
.subscribe(data => { console.log(data); });

PS: Based on the code you showed, you want to track the resizing of a window. If multiple size-values arrive within a short time frame, it might indeed make sense to process only the last one.

Upvotes: 4

BizzyBob
BizzyBob

Reputation: 14740

You can use filter to prevent emissions that are empty:

this.resizeSubject.pipe(
  bufferTime(100),
  filter(arr => arr.length > 0)
).subscribe(data => {
  console.log(data);
});

Upvotes: 1

Related Questions