Why, how and where for those who like RxJS :-)
Prerequisites: I assume you knwo RxJS and have some practice with it. If you are new to it or want to learn some advanced topics - watch my video-course " Hands-on RxJS for Web development " on Udemy.
Periodically in my development practice, I meet situations when you have to emit a few values in specified timeouts.
- To show and then hide some splash-message:
- To do some nice animations
- Or even just emit values for unit tests (yeah, I know about marbles, but sometimes I just want to check final value, period:)
So how it can be implemented? Ok, let's review some scenarios:
Ok, the simplest way — to run many setTimeout's, like this:
OK, not so bad, but what if I want to show more elements in different delays?
Looks oldschool and ugly. Can we do better?
Lets use RxJS now and try to implement it:
This code doesn't allow absolute delay (when the next emission is delayed against start/subscription moment).
Looks like a lot of code, and also delays are hardcoded. We can do better. So let's go further!
Ok, we already know that hardcoding values/delays is not reusable, and we also want to be able to schedule in relative (delayed against previous emissions) and non-relative/absolute (delayed against subscription moment) way. Taking all the above into account, I implemented a custom timeRange function.
- Looks nice and compact.
- Allows both absolute and relative delays to be specified.
OK, now let's show three use-cases I mentioned previously.
#1 Splash-message control example
Here it implementation code:
What do we do here?
- Emit two values with 1000 and 2000 delay (values don't play any role here, actually only timings matter)
- The first value will show splash element with a message.
- Second will hide it (using .classList.toggle('show'))
Here is how it works:
You can play with it in a codepen here.
#2 Animating a few elements subsequent appearance
Here is the code:
We just grab a set of elements and then show them one by one with specified timeouts on each range$ Observable emission.
Here is the result:
You can check the code here.
#3 Mocking input params for unit tests code with timeRange.
How it works:
- We mock ajax.get with a function that will return value '42' asynchronously (emulation of network request)
- Then se debounce time = 15ms.
- After that call getSearchResult with mocked input$ as a param and subscribe (to start the process).
- input$ will emit three values with delays 1ms, 5ms, 30ms. Since debounceTime is set to 15ms, only second and third values will cause network request to be called (ajax.get in our case);
The code and the test can be found here.
Have your own interesting RxJS solutions? Mention them in comments!
Like this article? Let's keep in touch on Twitter.
Want to learn more about RxJS? Give a try to my video-course "Hands-on RxJS". It contains both total beginners content and more advanced topics as well.