replace two successive setTimeout with rxjs
I have put together a pen over at CodePen where you can see how to implement it using RxJS: Use RxJS instead of setTimeout
const observablePattern = of(true)
.pipe(
delay(100),
tap(() => {
log('After 100 ms');
setSize(50);
}),
delay(1000),
tap(() => {
log('After another 1000 ms')
setSize(150);
}),
delay(500),
tap(() => {
log('After another 500 ms');
setSize(100);
})
).subscribe();
By using both the do
operator and the delay
operator, it should be pretty easy:
someObservable.delay(150).do(
() => this.renderer.addClass(this.mainContainer, 'side-container')
).delay(300).do(
() => this.renderer.addClass(this.sideContainer, 'open')
);
Observable.of(true)
.delay(150)
.do(() => {
this.renderer.addClass(this.mainContainer, 'side-container');
})
.delay(300)
.do(() => {
this.renderer.addClass(this.sideContainer, 'open');
});
Or with the new lettable/pipeable operators:
Observable.of(true).pipe(
delay(150),
tap(() => {
this.renderer.addClass(this.mainContainer, 'side-container');
}),
delay(300),
tap(() => {
this.renderer.addClass(this.sideContainer, 'open');
})
);
Source: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md