Callbacks occur when a function is passed as an argument so it can be called after another routine has finished. One of the most common uses for callbacks is with the setTimeout method. Kyle demonstrates the setTimeout method as well as how to use callbacks with AJAX requests.
If I pass bar by name, this utility, at some point later in the future, about 1,000 milliseconds from now, it's going to call that function, and print this out. So, everybody try this. Try typing that code into your console, I'll copy it over and show you. Let's try typing that code into your console and running it. And what you'll see is that it waits for a second, and then it prints out Hello World.
So, essentially what I'm doing is I'm passing a function by its value. I'm not calling the function, I'm passing the function value. Similar to how we return to function earlier, this is one where we're passing it in. Now this usage, passing a function as a value is often called callbacks. Because I'm passing a function in, that at some point later in the future, and I don't care when, you're going to call back to my function. Sometimes you're just going to execute it, like we're seeing here.
Sometimes you're going to callback, and you're going to pass me something. So an example of that is, let's imagine, back here, that I have some utility to find by a library called Ajax. And what Ajax takes is two parameters. So when I call it, I call ajax. And the first thing it expects is a URL. But the second parameter that it expects is a function.
Now I'm going to name mine resp. So if I declare what that function looks like, function resp, is expecting some content back, from the ajax request. And I'm going to print it. So what's happening is, I'm not calling resp, there's no parentheses here. I'm passing resp in, by reference, by name. And at some later point after the ajax request finishes, and it's got some content back, it's going to call my function and pass that content in, so that I'm going to be able to print it.
This isn't directly related to closure, but it's actually related to one of the base principles of closure, which is functions as first class values. That is, functions are a value, just like the number 42 is a value, and the string Hello World is a value. They're all just values. And we can pass values all around wherever we want to. And we can return values wherever we want to. There's nothing special about a function that makes it more or less capable as a value than the number 42.
Does that make sense? It's just a value that we can pass around. So in this case, what we're saying is, I don't have the response from that ajax request yet. If I did have the response, if it was an immediate thing, like if it could happen right away, then I could just say var resp = ajax, and you just get it. But because ajax is not a blocking network request, it doesn't have the answer right away. And the way we then wait for that answer is to pass in a callback. And that callback will get called back at some later time with the answer that we were looking for.
Note: This course was created on 03/29/2016 by Frontend Masters. We are pleased to host this content in our library.
- Carousels, panes, and modules
- Middle-end architecture
- Secure phrase generator
- Routing functions
- Calling the API
- Rendering on the page
- Shared data validation