Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Asynchronous Programming with JavaScript!
You have completed Asynchronous Programming with JavaScript!
Preview
This video shows you examples of synchronous and asynchronous JavaScript in the browser.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's have a quick look at some
examples of synchronous and
0:00
asynchronous code in JavaScript.
0:03
First, I'll show you an example of the
blocking behavior of synchronous code in
0:05
the browser.
0:09
I have this function named wait,
consisting of
0:10
a while loop that runs continuously for
8,000 milliseconds or 8 seconds.
0:12
Below the function, there's an
EventListener that calls the wait function
0:17
when the red button up here
on the page is clicked.
0:20
Notice how in the body of the wait
function, the start variable and
0:23
while loop are between a console.log
statement that logs the message, starting,
0:27
and one that logs the message, finished.
0:32
Over in the browser,
0:34
let's have a look at what happens when I
click the button to call the function.
0:35
In the console,
we immediately see the message, starting,
0:38
then it starts to run the while loop,
which is quite an intensive chunk of code.
0:42
And eight seconds later we see the message
finished logged to the console.
0:45
I'll run the function again, and
0:50
this time notice how the browser freezes
until the function finishes executing.
0:51
The sight is unable to process
any user interactions.
0:56
For example, I can't type into
a text field, click a button,
0:59
even select text on the page.
1:02
All user interactions are blocked
by the running program.
1:04
This is what's meant by blocking behavior,
1:07
other parts of the program
are blocked from running.
1:10
In this case, the browser is blocked
from being able to handle user input and
1:13
perform other tasks until the wait
function is completely done
1:18
executing after eight seconds.
1:23
And line seven here cannot start to
run until line six has finished.
1:25
Now I'll show you how this
operation might run asynchronously.
1:32
JavaScript runtime
environments, like the browser,
1:35
provide methods that allow it to
run code in an asynchronous way.
1:38
You'll learn a whole lot
more about this later.
1:41
The setTimeout method, for example, is one
of the most basic ways to asynchronously
1:43
schedule code to run after
a given amount of time.
1:48
It accepts a callback function that
executes a chunk of code at a later
1:51
time specified by the delay
value in milliseconds.
1:55
So this time I have a function named
carryOn, the first line log starting, and
1:59
right after the console.log,
the setTimeout method gets called and
2:03
an anonymous function is
passed as its callback.
2:08
Which after 8,000 milliseconds or eight
seconds logs finished to the console, and
2:11
the event listener at the bottom calls
carryOn when the button is clicked.
2:15
Over in the browser,
I'll click the button.
2:19
And notice that while the function runs,
I'm able to do other things,
2:22
like type into the text fields,
for example.
2:26
setTimeout returns control to the browser,
and after eight seconds,
2:28
finished is logged to the console.
2:33
Next, I'll show you a more real-world
example that involves requesting data from
2:35
a server.
2:40
I'm using a testing endpoint from
the jsonplaceholder API that returns 5,000
2:40
photo objects.
2:45
So this API call might take some time.
2:46
The time it takes to complete might depend
on a variety of factors like the speed
2:48
of the API servers, the users
internet connection speed, and so on.
2:52
So when the function getJSON is called,
2:56
it's going to fire off an AJAX
request using XMLHttpRequest or
2:58
xhr to retrieve the data which is an array
containing all 5,000 photo objects.
3:03
When the data returns,
it's going to iterate over it and
3:08
log each object to the console.
3:12
Notice that below the call to get JSON,
I have an alert method that
3:14
should display an alert dialogue,
with the message, welcome to this page.
3:18
I wrote the data fetching function
as a synchronous blocking operation,
3:23
that leaves the program in a waiting
state while the data is being requested.
3:26
Using a feature of XHR that's deprecated
in all the major browsers due to its
3:30
negative effects to the user experience.
3:35
So I don't recommend doing it this way,
well, let's see what happens.
3:37
Over in the browser, when the page loads,
3:40
the getJSON function is
called to retrieve the data.
3:43
While the function is running and
executing each task,
3:46
like requesting the data, parsing it,
and logging it to the console,
3:49
the browser is incapable of doing
anything else, it's blocked.
3:52
So there's a pretty significant delay
between when the page loads and
3:55
when the alert window pops up.
3:59
Again, there might be other things the
browser could be doing, but it can't until
4:01
the server responds with all the data and
the getJSON function processes it.
4:05
JavaScript now provides safety nets to
prevent making synchronous requests like
4:10
this with features you will
learn about in this course.
4:15
Now let's look at the same operation
written in a non-blocking asynchronous
4:18
way, like it usually is.
4:23
Over any browser, the page loads, and
4:24
we immediately see the alert box with
the message welcome to this page.
4:27
Meanwhile, the function requests
the comments from the API and
4:31
eventually logs in to
the console once retrieved.
4:34
Click OK, and
see them being logged to the console.
4:37
The user is also able to interact
with the browser during that time.
4:40
So if you program needs to
run tasks that take time,
4:46
we should do our best to run and
complete those tasks asynchronously, so
4:49
that other parts of the program can
carry on and do what they need to do.
4:54
When working with asynchronous code,
4:58
you might notice that it
executes in unexpected ways.
5:00
For example, a function set to execute
after set timeout delay expires,
5:03
may not execute exactly after
the specified delay value.
5:08
So up next, we'll explore how JavaScript
works with the special web API and
5:11
something called the event loop to
manage and execute asynchronous tasks.
5:16
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up