Advanced Asynchronous JavaScript

Challenge 2: Solution II

Advanced Asynchronous JavaScript

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

The "Challenge 2: Solution II" Lesson is part of the full, Advanced Asynchronous JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Continuing to take ideas from students, Jafar continues to walk through the solution to Challenge 2 to be able to count subscribes and completes by concatenating data to the front and back of the observable.


Transcript from the "Challenge 2: Solution II" Lesson

>> Jafar Husain: So now what do we have? Well, we've got this.
>> Jafar Husain: What now, gentlemen?
>> Speaker 2: It seems to be that there's a problem that we're losing information about
>> Speaker 2: So the first observable ends while the second observable is still running. So we have that one there.
>> Jafar Husain: Mm-hm.

>> Speaker 2: If you start reducing this number, you're gonna hit zero animations are allowed. Cuz every time one starts, it goes negative. As the end, they go positive. When it hits zero, you have animations are allowable.
>> Jafar Husain: Yeah, so for those at home who didn't hear that, I think your concern was don't we lose the information that two observables overlap when we flatten them out?

>> Speaker 2: Hooray.
>> Jafar Husain: But if we count the number of negative ones in the stream, right, then we actually know how many observables are currently running. So every single time we get a new number, we can just sorta add them together. And then when we get to zero, we know no tasks are currently running.

You know what I did?
>> Speaker 2: You ran-
>> Jafar Husain: I'm sorry?
>> Speaker 2: But the problem is, okay, if we look at our autumn flattened, ones are supposed to represent when animations are allowed, correct?
>> Jafar Husain: Well, when no tasks are running, then an animation is allowed. But I'm just realizing here, I kinda stupidly transposed my ones and negative ones,, which might make this slightly less intuitive.

I meant to put ones first and negative ones second. Let me just fix that here. And one, basically at this point, would indicate that a task has begun. And negative one would indicate that a task has ended. And setting it up like this makes them easy to count.

>> Speaker 2: Right.
>> Jafar Husain: So that's my fault, I'm sorry about that, stupid mistake.
>> Jafar Husain: So hopefully, that's a little clearer and more intuitive.
>> Jafar Husain: So now hopefully it's clearer that we can just sort of count these.
>> Jafar Husain: Right, so hopefully that's clearer. So now, how are we gonna get animationsAllowed, which looks like this recall?

>> Speaker 2: Is it scan?
>> Jafar Husain: Absolutely, we wanna scan, right? Scan's for counting, for keeping track of things. So we're gonna get a progressively more accurate sense of how many tasks are currently running.
>> Jafar Husain: So help me out here. What am I gonna put in my scan?
>> Jafar Husain: By the way, I should have mentioned earlier.

You can give scan an initial value for the accumulator as a last parameter, just like reduce. So I'm gonna pass in 0 as the initial value. I don't think I even need to here, but I'm going to anyways. What do I wanna put in here?
>> Speaker 2: Accumulator plus current.

>> Jafar Husain: Yeah, now what am I gonna end up with?
>> Jafar Husain: Does that make sense? Cool, so how am I gonna go from here to here?
>> Speaker 2: Check if it's equal to 0.
>> Jafar Husain: Check if it's equal to 0, and then return, what specific operator am I gonna use?

>> Speaker 2: Filter?
>> Jafar Husain: Filter, yeah.
>> Speaker 2: Yeah.
>> Jafar Husain: Okay, it sounds like we're a little tentative. But I'll use filter and value, and I'm gonna return what?
>> Jafar Husain: What am I filtering on?
>> Speaker 2: It's equal to 0.
>> Jafar Husain: Okay, let's see what happens here.
>> Speaker 2: Should we map the booleans at this point?

>> Jafar Husain: Yeah, I don't think that got us, that didn't get us quite what we wanted. Cuz it seems like now we've lost the places where we wanna switch it to false.
>> Speaker 2: Right.
>> Jafar Husain: [CROSSTALK] But I think we're on the right track. Sorry?
>> Speaker 2: It would map it if it was equal to 0.

>> Jafar Husain: Right, good call. So now we're gonna end up with,
>> Jafar Husain: I think about that. I'll just shorthand the f here, cuz it's using up a little too much space.
>> Jafar Husain: Cool?
>> Speaker 2: And the last one will be true.
>> Jafar Husain: Yeah, sorry, thank you.
>> Jafar Husain: Cool, guys, we're really close now.

What was that?
>> Speaker 2: distinctUntilChanged at this point.
>> Jafar Husain: distinctUntilChanged.
>> Jafar Husain: So really the big leap on that one was just realizing that we could count subscribes and completes by concatenating data onto the front and the back of the observable. But after that, I think it was relatively straightforward.

That's what made it tough. So if we throw distinctUntilChanged in there,
>> Jafar Husain: We're good.

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