Advanced Asynchronous JavaScript

Q&A: Preloading with Callback

Advanced Asynchronous JavaScript

Check out a free preview of the full Advanced Asynchronous JavaScript course

The "Q&A: Preloading with Callback" Lesson is part of the full, Advanced Asynchronous JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

With the Reddit Image Viewer application completed, Jafar takes questions from students about using the preloading with a callback.


Transcript from the "Q&A: Preloading with Callback" Lesson

>> Jafar Husain: We got remote image viewer. Thanks a lot guys, most of you guys wrote that, I think. You wanna help me out with any questions that you had? Anything you were wanting to cover that we didn't get a chance to cover within reason, yeah?
>> Speaker 2: If it's not too much trouble, could be re-implement the image preloader using the callback form rather than the event form?

>> Jafar Husain: You mean like-
>> Speaker 2: Rather than using from event?
>> Jafar Husain: Yeah, so in order to do that I would probably have to construct an observable myself in the same way that we've been doing. Is that what you would like to try doing?
>> Speaker 2: It's not too much.
>> Jafar Husain: Not at all, no no.

So in our little tiny version of RX, remember we would create a new observable by passing a subscribed function to the constructor. When you're working with RealRX, if you wanna create your own observable from the ground up by defining subscribe, you go Observable.create. And Observable.create just basically accepts the subscribed definition.

So it's no different than passing under the constructor.
>> Jafar Husain: And to be honest, this will be even simpler, but there's more that can go wrong. So in general, I like to combine smaller items and use this approach of building the observable by defining subscribe as only a last resort, when you can't get the composition operators to work.

So here it's actually gonna be a shorter code though. So I'm gonna create my image.
>> Jafar Husain: And I'm gonna say,
>> Jafar Husain: All right, well maybe shorter but. So I'm halfway done, what am I missing? Remember this is the definition of subscribe, what am I missing?
>> Speaker 2: Unsubscribe.
>> Jafar Husain: Unsubscribe, exactly.

>> Jafar Husain: So I think I'm going to have to, there might be a quicker way of doing this, but think I'm gonna have to factor these functions out into a variable. You know what, I can avoid this.
>> Jafar Husain: I'll just set them to undefined.
>> Jafar Husain: By the way also, because a subscription is just a object clothing for a single function, Observable.create allows you to return just the definition of the unsubscribe function.

So I'm basically gonna pass in, write that so it's clear. But,
>> Jafar Husain: I think that'll work.
>> Jafar Husain: I don't wanna get too fancy.
>> Jafar Husain: Everybody comfortable with that?
>> Jafar Husain: All right, ideally a last resort. Well lets stay honest and make sure that it actually works here. And what am I missing though?

>> Speaker 2: Uncomplete.
>> Jafar Husain: Yeah, right, otherwise this variable won't end. So in both these cases I need to complete.
>> Jafar Husain: And let's keep ourselves honest and actually try that this works.
>> Speaker 2: So in our specific case, we aren't like paying attention to an uncomplete, but to follow good pattern we would need to implement it?

>> Jafar Husain: Well maybe we aren't, but switch is. Well, it is in the sense that switch technically doesn't really care, right. But, well if you have a two dimensional observable and the outer observable completes and the inner observable completes, then and only then do you free up all your callbacks, right.

So switch is subscribing to the outer observable and each inner observable. And it only unsubscribes you from the flattened observable it creates when both the outer and inner observable complete. And so if we have an observable hanging around that hasn't completed, it's gonna be hanging on to the handler somewhere, right.

So unsubscribe doesn't get called. Does that make sense? Do you wanna try this? Let's try it.
>> Jafar Husain: Looking good so far, right.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now