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 Callback Functions in JavaScript!
You have completed Callback Functions in JavaScript!
Preview
In this video, we'll create our callback function and a function that will execute our callback.
This video doesn't have any notes.
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
Launch the Workspace with this video.
0:00
Let's create a simple callback function,
and
0:02
a function that will call our callback.
0:05
Let's look at some non
callback code as a refresher.
0:08
There's going to be two JavaScript files,
logger.js and callback.js.
0:11
Logger.js is where the non
callback code is, and
0:17
callback.js is where we'll be
programming the callback code.
0:20
Open up the logger.js file, and
0:25
you can see we have a variable
with my name and role.
0:28
We also have a logTeacher function
that takes the teacher, and
0:33
prints out their name and role.
0:38
Let's preview this, and
open up the Developer Tools.
0:44
You can see my information is printed out.
0:50
Going back to the code, the person
object is passed into the logTeacher
0:54
function, and is named teacher
within the function scope.
1:00
Remember this, when we code in our
callback and the function that will run
1:05
our callback, open up callback.js and
there's a single function called sayHello.
1:09
It logs out Hello to the console.
1:16
This will be the callback
function we want to execute.
1:19
Let's create a function called,
executeCallback.
1:23
With one argument, callback. This
1:31
is going to be a really simple function
that just executes the callback passed in.
1:37
Normally, you wouldn't
write a function for this.
1:44
The function is just a utility function so
1:47
that we can use this sayHello
function as a callback.
1:50
Inside the executeCallback function,
1:54
we'll call the callback
function by using parentheses.
1:57
This is in essence what any function
requiring a callback would do.
2:02
It would invoke the callback
with parentheses.
2:07
Our executeCallback function invokes
the callback immediately, or
2:11
you could say synchronously.
2:16
When you use callbacks on the DOM or
in node.js in the future,
2:19
more often than not, there will be a delay
between you passing in the callback,
2:22
and when it gets executed.
2:28
Finally, let's use the executeCallback
function and pass in sayHello.
2:30
Remember, we don't use parenthesis.
2:38
We're not invoking the function yet.
2:42
sayHello is now stored in
the callback variable,
2:43
in the scope of
the executeCallback function.
2:47
Then, it's invoked.
2:51
In the index.html file,
delete the logger.js line.
2:55
Preview again.
3:03
Preview the program and
open up the Developer Tools.
3:06
We see that Hello is printed out.
3:09
We turned sayHello from a regular
function into a callback function
3:18
in the act of passing it in to
the executeCallback function.
3:25
This is how all callbacks work.
3:30
A function is passed into
another function, and
3:32
gets executed at a future time, or when
an event like a user-interruption occurs.
3:36
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