Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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