Name: Return a Function to Cancel an Async Behavior
Uploaded: 2020-08-10T17:21:48-05:00
Description: Cancelation is huge part of async code, but again, APIs in JavaScript are inconsistent. We can develop our own pattern to allow us full control over how cancelation behaves so that our functions can work together.

Create a Function to Configure setTimeout

Return a Function to Cancel an Async Behavior

Wrap addEventListener in a Function for More Control

Create a Utility Function to Control setInterval

Combine Multiple Async Behaviors with a Merge Function

Use Lodash Curry When Functions Return Functions

Match Function Requirements with Lodash Partial and Flip

Create a Buffer to Pair Values Together with Zip

Pass an Array to a Callback with a forOf Function

Pass a Done Symbol when an Async Function is Done

Establish Callback and Closure patterns Around Async Browser Behaviors

Cancelation is huge part of async code, but again, APIs in JavaScript are inconsistent. We can develop our own pattern to allow us full control over how cancelation behaves so that our functions can work together.

https://app.egghead.io/api/v1/lessons/javascript-return-a-function-to-cancel-an-async-behavior/subtitles

John Lindquist: [0:00] With almost all asynchronous scenarios, we need to be able to cancel what we told our code to do in the future. We said after one second, console.log("1"). Our challenge is to cancel this behavior before it happens. The problem is that to cancel a timeout, you need to get the id of the timeout, but now, this id is stuck inside of the body of this function.

[0:25] A straightforward solution is to return the id. That means that anytime one of these is called, we can get back an id, which we can use to clear a timeout and pass in that id. If I hit Save here, you'll see no 1, but then a 2 and a 3. This means we successfully cleared the timeout created by this oneSecond function.

[0:50] Because this is always the way to cancel timeouts, instead of returning the id, we can return this wrapped in a function. I can cut this out. Instead of id here, I can create a function. In the body of that function, I'll paste clearTimeout(id).

[1:10] Now this is returning a function which captures the behavior we want, the cancellation behavior. Instead of an id here, we'll have a cancel function, which we can then call. When I hit Save, you'll see only 2 and 3 up here.

[1:26] Because of the way we set this up, we have cancellation available to all of the functions we've created, to oneSecond, twoSeconds, and threeSeconds. I'll rename this one cancelOne. Then I can easily create a cancelTwo and cancel that as well. I will hit Save here. You won't see 1 or 2, but you will see 3.

[1:52] We gave ourselves a lot of flexibility by capturing behaviors, like clearing a timeout inside of a function and creating a timeout inside of a function. The complexity comes from understanding that your function returns another function.

[2:07] When I invoke createTimeout, it's giving me back this function, which expects a callback. CreateTimeout gives me back oneSecond, which is a function, and oneSecond takes this callback. Then oneSecond is also returning a function, which wraps the behavior of canceling what it's doing.

[2:27] You gain a lot of power and flexibility when you wrap things inside of functions. The complexity you need to grow accustomed to is the idea of returning functions from other functions, and also passing functions into other functions, like we do here.

Return a Function to Cancel an Async Behavior

Share this video with your friends

Course

Establish Callback and Closure patterns Around Async Browser Behaviors