What is a callback function in javascript?

In JavaScript, a callback function is a function that is passed as a parameter. Function A is passed as a parameter (function reference) to another function B, and this function B executes function A. Function A is called a callback function; if there is no name (function expression), it is called an anonymous callback function.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

What is a callback function (Callback)

In JavaScript, functions are objects. Therefore, functions can take functions as parameters and can be returned by other functions. Functions that do this are called higher-order functions. Any function passed as a parameter is called a callback function.

The specific definition of the callback function is: function A is passed as a parameter (function reference) to another function B, and this function B executes function A. Let's just say function A is called a callback function. If there is no name (function expression), it is called an anonymous callback function.

Why do we need callbacks?

For one very important reason - JavaScript is an event-driven language. This means that the JavaScript will not continue waiting for a response, but will continue executing while listening for other events. Let's look at a basic example:

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

As you might expect, the function is executed first, then the second function, logging the following to the console:

// 1
// 2

Everything works so far very good.

But what if the function contains some code that cannot be executed immediately? For example, an API request where we have to send the request first and then wait for the response? To simulate this action, setTimeout will be used, which is a JavaScript function that will be called after a set time. We delay the function by 500 milliseconds to simulate an API request. Our new code will look like this:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();

It's not important to understand how setTimeout() works now. Importantly, you see that we moved console.log(1) to within the 500ms delay. So, what happens when we call a function?

first();
second();
// 2
// 1

Even though we called the first() function first, we printed its result after the second() function.

It's not that JavaScript isn't executing our functions in the order we want, it's that JavaScript isn't waiting for the response from first() before continuing with second().

Then why are you showing this? Because you can't call one function after another and expect them to execute in the correct order. Callbacks are a way to ensure that certain code does not execute until other code has finished executing.

Create a callback function

Okay, without further ado, let’s create a callback!

First, open your Chrome Developer Console (Windows: Ctrl Shift J) (Mac: Cmd Option J) and type the following function declaration in the console:

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

Now let’s Add a callback - As the last parameter in the doHomework() function, we can pass in a callback. Then define the callback function in the second parameter of the call to doHomework().

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

As you can see, if you enter the above code in the console, you will receive two alerts: the "starting homework" alert, and then the "finished homework" alert.

However, it is not always necessary to define a callback function in our function call. They can be defined elsewhere in our code, like this:

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

The result of this example is exactly the same as the previous example, but the settings are slightly different. We can see that during the doHomework() function call, we have passed the alertFinished function definition as a parameter.

A real example

We try to call Twitter’s API. When you make a request to an API, you must wait for a response before you can act on that response. This is a good example of a true callback. The request looks like this:

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

T.get means we are sending a get request to Twitter

There are three parameters included in this request: "search/tweets" (this is the route of our request ), params (which are our search parameters) and an anonymous function (which is our callback).

Callbacks are important here because we need to wait for the server's response before we can continue executing the code. We don't know if our API request will succeed, so after sending the parameters to search/tweets via a get request, we wait. Once Twitter responds, our callback function will be called. Twitter will send us an error (error) object or a response object. Within the callback function, we can use an if() statement to determine if our request was successful and then act accordingly on the new data.

[Related recommendations: javascript learning tutorial]

The above is the detailed content of What is a callback function in javascript?. For more information, please follow other related articles on the PHP Chinese website!