This is the 12th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

preface

In a scene, js is asynchronous operations, if have event a, b, c three events, the execution sequence must be a, b, c, then we will write three functions in respectively to perform these three events, and to perform functions a, call again in a and b in b to call c again, but this approach is very low, We can use callback functions to solve this problem. What is a callback function? We will explain each one next.

The callback function

Definition of the callback function

A callback function is a function a passed as an argument to a function b that executes a in b. This is a callback function

    function b(callback){
        console.log('I'm a print of B')
        callback()
    }
    b(function(){
        console.log('I'm a print of A')})// The result is: I am b's print and I am A's print
Copy the code

Function (){console.log(‘ I’m a print of a ‘)}; this function is a callback function

The use of callback functions

I’m sure you’ve all used Ajax. The parameter list for an Ajax request has a success: Function (data){} function(data){} function(data){} function(data){} function(data)

    // Here the timer simulates the interface to request background data
    function b(callback){
        setTimeout(function(){
            var data = 'I'm requesting the data back.'
            callback(data)
        },2000)}// The success function here is equivalent to the Ajax success function
    let success = function(data){
        console.log(data)
    }
    b(success)
    // The result of the run is that I am requesting the data back
Copy the code

Now that you have a better understanding of the callback function, let’s solve the problem that was thrown at the beginning

    // The timer in the following code simulates the operation of the interface requesting background data
    
    // A event execution
    function a(callback){
        setTimeout(function(){
            console.log('EVENT A has completed execution')
            callback && callback() // If the callback function is passed, it will be executed. If the callback function is not passed, it will not be executed
        },5000)}//c event execution
    function c(){
        console.log('C event completed')}// B event execution
    a(function(){
        setTimeout(function(){
            console.log('B event completed')
            c()
        },2000)})// The result is that event A is finished, event B is finished, and event C is finished
Copy the code

As you can see from the above code, we can easily solve the problem mentioned at the beginning by using the callback function, and we pass b into the call to function A as a callback function, thus reducing the declaration of function B.

conclusion

This paper is to explain what is the callback function and what’s the use of the callback function exactly, and how to use a callback function, but the callback function in daily work also shoulds not be multi-purpose, if very multilayer using callback functions, then can produce the callback hell, later code will be very trouble to change, therefore, our next article will explain how to solve the problem of the callback is hell.