JavaScript's callback function

Since a function can be assigned to a variable like other data, it can be defined, deleted, and copied, why can't it be passed as a parameter to other functions?

In the following example, we define a function that takes two functions as arguments. The function executes the two parameter functions separately and returns the sum of their return values.

function Invoke_and_add (b) {    return A () + B ();            }

Now let's simply define the two functions that participate in the addition operation, which simply returns a hard-coded value:

function One () {    return 1;} function Both () {    return 2;    }

Below, we simply pass these two functions to the target function Invoke_and_add (), and we can get the result of the execution:

Invoke_and_add (one, both);

3

In fact, we can also use anonymous functions directly instead of one () and one () as the parameters of the target function, for example:

Invoke_and_add (function () {return 1;},function () {return 2;})

When we pass function A to function B and B to execute a, a is a callback function (callback functions). If a is still a nameless function at this point, we call it an anonymous callback function.

So, when should I use the callback function? Let's demonstrate the advantages of the callback function in a few application examples.

* It allows us to pass the function without naming it (which means that global variables can be saved).

* We can delegate a function call operation to another function (which means that you can save some code writing work).

* They also help improve performance.

Callback Example:

During the programming process, we usually need to pass the return value of one function to another. In the following example, we define two functions: the first multiplaybytwo (), which multiplies the three parameters it accepts by a loop by 2, and returns the result as an array, and the second function AddOne () accepts only one value and then adds 1 and returns it.

function Multiplybytwo (a,b,c) {    var i,ar =[];      for (i=0;i<3;i++) {    = arguments[i]*2;}     return ar;        } function AddOne (a) {    return a+1;}

Now, let's test these two functions:

Multiplybytwo (a);

[2,4,6]

AddOne (100)

101

Next, we want to implement the passing of these three elements between the two functions, which requires defining an array for storing the elements. Let's start with the call to Multiplybytwo ():

var Myarr =[];

Myarr=multiplybytwo (10,20,30);

[20,40,60]

Then, iterate through each element and pass them to AddOne (), respectively.

for (Var i=0;i<3;i++) {Myarr[i] =addone (Myarr[i]);}

Myarr

[21,41,61]

As you can see, this code works, but obviously there is some room for improvement. In particular, two loops are used here, and if the amount of data is large or the loop operation is complex, the overhead must be significant. Therefore, we need to combine them. This requires some changes to the Multiplybytwo () function to accept a callback function and invoke it in each iteration operation. Specific as follows:

function Multiplybytwo (a,b,c,callback) {    var i,ar=[];      for (i=0;i<3;i++) {        ar[i]=callback (arguments[i]*2);    }     return ar;}

Once the function modification is complete, the previous work requires only one function call at a time, and we simply pass the initial value and the callback function to it as follows:

Myarr= Multiplybytwo (1,2,3,addone);

[3,5,7]

We can also use anonymous functions instead of AddOne (), which saves an extra global variable.

Myarr= Multiplybytwo (1,2,3,function (a) {return a +1});

[3,5,7]

Furthermore, using anonymous functions is easier to adjust the code at any time, as needed. For example:

Myarr = Multiplybytwo (1,2,3,function (a) {return a +2});

[4,6,8]

　　

JavaScript's callback function