Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Asynchronous Programming with JavaScript

Well done!

You have completed Asynchronous Programming with JavaScript!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Stepping Through Async Code

3:29 with Guil Hernandez

Use the Chrome DevTools debugger to step through the code you've written and highlight the flow of code execution.

Now I'm going to use the Chrome Dev Tool's debugger in the Sources panel to step 0:00
through the code we've written so far and highlight the flow of code execution. 0:04
From the EventListener handler to the AJAX onload callback, 0:07
to the anonymous function that's passed to get JSON, and so on. 0:11
Stepping through code is when you execute code one line or 0:15
function at a time to observe changes in the data and in the page, 0:19
which helps you understand exactly what's happening in your program. 0:22
It's also incredibly helpful for debugging code. 0:26
In the sources panel I'll set what's called a breakpoint, 0:29
which is the spot in the code you want to pause execution of the program. 0:32
I'll set a breakpoint by expanding this list of Event Listener Breakpoints on 0:36
the right. 0:41
And these are the types of events we can break on, or 0:41
pause execution when an event occurs. 0:44
I want to pause when the View button is clicked so 0:46
I'll open the list of Mouse events and select click. 0:50
Now I can click the button on the page and 0:55
see that the program is paused on event listener BUTTON.click. 0:58
The Call Stack pane here represents the current call stack, 1:02
which is keeping track of the order a function calls. 1:05
We see that the event listener's anonymous callback function was added 1:08
to the Call Stack. 1:13
So now I'll use the Step over next function call and Step into next function 1:14
call icons to execute what happens in each function call, one statement at a time. 1:20
So every time getJSON is invoked, as you can see here in Call Stack, 1:26
it fires off an AJAX request to a server. 1:31
It's going to wait for response from the server and the requested data before 1:35
it can move forward with the rest of the code without blocking other tasks. 1:40
Remember, the request is handed off to a web API to be processed asynchronously. 1:45
In fact, in the Call Stack pane, 1:50
notice how xhr.onload was registered as an async task. 1:53
When the JavaScript engine encounters a network request, it says, hey, browser, 1:57
request this data while I do something else. 2:02
When the data comes back let me know and only then I'll do something with it. 2:05
So here it's making the first call to the open notify API. 2:09
If the request succeeds and the results are ready, the async task gets put on 2:16
the call back queue then pushed on to the call stack to be executed. 2:20
So now you see that the first AJAX call is complete. 2:24
And the program moves on to getJSON's anonymous callback, 2:27
where the map method inside it calls getJSON based on 2:31
the number of people returned, in this case, six times. 2:34
So there's the next call to getJSON, which is the first Wikipedia API call. 2:37
And we see another async task registered in the callback pane. 2:44
Once it gets the requested data, 2:49
it calls the generateHTML function to create the DOM elements. 2:51
The program then runs through the same sequence 2:56
five more times to get all the Wikipedia data and generate the HTML. 2:59
Once it gets all the data, the program finishes execution. 3:06
Now, we don't always know if the API requests are going to be successful or 3:10
not, but 3:14
the getJSON function nonetheless waits for a response without blocking the thread. 3:14
In this case all the data returns rather quickly. 3:19
To learn more about using the debugger and stepping through your code, 3:22
check out the resources posted in the teacher's notes with this video. 3:25