Preview
Video Player
00:00
00:00
Creating a Simple Callback Function
3:42In this video, we'll create our callback function and a function that will execute our callback.
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