Today I've seen a strange problem when using RxJS. Please help me inspect it.
The problem I am working on is: "Given an array of image URLs, load and append all images to a div."
All the code snippets to demonstrate is here:
At the beginning, I used the first snippet
.
However, Rx.Observable.prototype.flatMap
sometimes puts the images in wrong order (this behavior is noticed in the documentation). So, I changed to use concatMap
(second snippet
).
This time, only the first image is loaded. I took some time inspect the problem. I doubt that event load
is not trigged from image
. But the most confusing situation is that when I add some code to listen to image
's load
event only, it showed me that the event is trigged properly... (third snippet
).
Then I decided to write another version using $.Deferred
(fourth snippet
).
It worked...
Could you please tell me what is the problem? Thank you very much!
Because
fromEvent(image, 'load')
on the first sub-observable is not completed, other sub-observables are waiting forever. So you should complete sub-observable after first event.Use
take(1)
.excerpt from your second snippet
Add take(1) to complete sub-observable
EDIT:
Using
concatMap
makes loading image sequential, so it is slow.If you pass
index
, you can usereplace
instead ofappend
to keep the order. In this case, you can useflatMap
, which enables fast concurrent loading.