Combine Multiple Async Behaviors with a Merge Function
We've reached the point where established broadcasters and we can begin to use them together. This lesson walks through creating a merge function which can take two broadcasters and listen to both of them.
John Lindquist: [0:00] The most important thing we've done here is establish consistency. You can see that in the last function that we return in each of these, they're each expecting a listener. This function expects a listener, this function expects a listener, and this function expects a listener.
[0:18] When you've put together a pattern like that where you know what a function argument is going to be, you can start combining functions in interesting ways. Let's add a listener and create an interval.
[0:30] We can create an addButtonListener and assign that to addListener. We can pass in the id of button, then an addButtonClickListener. We'll use addButtonListener and pass in click.
[0:49] We can also create a oneSecond, which is our createInterval and pass in one second. Now we have two functions, addButtonClickListener, and oneSecond, which are each expecting a listener.
[1:04] Here, we passed in time. Time is here. Now we're expecting a function that accepts a listener, an addButtonClickListener. Took in the selector and the event type. Now we're expecting a function that accepts a listener. I'm going to name functions that accept listeners as broadcasters.
[1:22] You may also hear these named sources or other words that describe things that push out values. For now, a broadcaster is a function that accepts a listener. I can create a function, like merge, that accepts two broadcasters. We'll say broadcasterOne and broadcasterTwo.
[1:43] We're calling this merge because these two broadcasters are going to return a broadcaster, meaning a function that accepts a listener. Merge will take both broadcasters, broadcasterOne, and pass in the listener, and broadcasterTwo, and pass in the listener.
[2:03] Now we can use merge, invoke it, and pass in addButtonClickListener, and oneSecond. I'm going to name this clickAndTick. Although mergedAddButtonClickListenerWithOneSecond would be more descriptive, that's a lot of typing. clickAndTick can take a listener, which will be invoked when either the button is clicked or an interval has ticked.
[2:31] So, console.log(clickOrTick). I'll hit Save. You'll see it start ticking away. If I click the button, I can add a whole bunch of them. Because we also follow the pattern of having a broadcaster, again, a function that accepts a listener, return a way of canceling the broadcaster.
[2:51] We returned a clearInterval, we returned a removeEventListener, and we returned a clearTimeout. Because we're creating a new broadcast with merge, we also have to return a way to cancel both of these. Because we followed a pattern, we simply have to say cancelOne is the result of calling broadcasterOne, and cancelTwo is the result of calling broadcasterTwo.
[3:18] Then we can return a function which calls both cancelOne and cancelTwo. Actually, let's rename this to clickOrTick, because logic is this broadcaster or this broadcaster. Invoking clickOrTick will now return a way to cancel clickOrTick. If I hit Save, we're back to ticking and clicking. If I invoke cancelClickOrTick, hit Save, you'll see no ticking, and clicking does nothing.
@Tahsin, if you are having trouble reading the function names, you can always look at them in the code and in the community notes. They have all of the code you need for the course.
Why didn't you use a big screen ? :( It is reaaly hard to catch all those function names while watching.