javascript understand and use callbacks

In javascript , function is built-in class object, which means it is a type of object, and others may String, Array, Number, an object of the same class for managing Objec built-in objects. Because the object is actually a function, it can be "stored in a variable, the parameter passed to the (other) function (function), the function created in the interior, and returns the value from a function."
Because the function name itself is variable, the function can also be used as a value. In other words, not only can pass parameters like the same pass a function to another function, and a function can be returned as a result of another function.

function callSomeFunction(someFunction, somaArgument) {  
    return someFunction(somaArgument);  
  }  
  
  function add(num) {  
    return num + 10;  
  }  
  var result1 = callSomeFunction(add, 10);  
  console.log(result1); // 20;  
  
  function getGreeting(name) {  
    return "hello "+ name;  
  }  
  
  var result2 = callSomeFunction(getGreeting, "world");  
  console.log(result2); // hello world;

This calSomeFunction () function is generic, i.e., whether the incoming first parameter is a function of what is, it returns the result of execution of the first parameter. To access the pointer to the function without performing a function, then it must be removed parentheses after the function name. Thence to the above Liezi callSomeFunction () is add and getGreeting, rather than the results after the execution thereof.

Let's look at a few callback function.
Commonly used functions in jQuery:

$("#btn").click(function() {  
  alert("Btn  Clicked");  
})

As in the example above, we pass to a click method of anonymous function parameter. click method will be called (or executed) we pass to their callback function. This example is typical of the way of a callback function.
Typical examples of a look javascript:

function callFunction(something) {  
    for (var item in something) {  
      console.log(item + ": " + something[item]);  
    }  
  
  }  
  
  function getSome(obj, callback) {  
    callback(obj);  
  }  
  
  getInput({name: "CSDN", lang: "Javascript"}, callFunction);

The result returned is CSDN: Javascript.
Speaking callFunction passed as a parameter to the getSome, in function, so using the callback callback value, this value calFunction the process. Thus forming a good function of the process. The segments are processed separately.
Use the callback function contains this object. When the callback function is a method of this object contains, we must modify the method to perform the callback function to protect the contents of this object. Otherwise, this object will point to the global window object, or points to a function.

var obj = {  
    name: null,  
    setName: function (firstName, lastName) {  
      this.name = firstName + "-" + lastName;  
    }  
  }  
  
  function getName(firstName, lastName, callback) {  
    callback(firstName, lastName);  
  }  
  
  getName('Tom','Jony',obj.setName);  
  console.log(obj.name); // null  
  console.log(window.name); // Tom-Jony

When obj.setName is executed, this.name object obj not set name, but is provided in the window object name, as getName is a global function. This occurs because the global functions in this object points to the window object.
This time we can use the Call and Apply function to protect this object.

var obj = {  
    name: null,  
    setName: function (firstName, lastName) {  
      this.name = firstName + "-" + lastName;  
    }  
  }  
  
  function getName(firstName, lastName, callback, callbackObj) {  
    callback.call(callbackObj, firstName, lastName);  
    // callback.apply(callbackObj, [firstName, lastName]);  
  }  
  
  getName('Tom', 'Jony', obj.setName, obj);  
  console.log(obj.name); // Tom-Jony

So that you can correct setting this object through the function call, we can now perform the callback function correctly and it is correctly set obj object name. Use apply is the same.
Multiple callback functions are possible, too. A typical example is the jQuery ajax function .

function successCallback() {  
    // Do stuff before send  
}  
  
function successCallback() {  
    // Do stuff if success message received  
}  
  
function completeCallback() {  
    // Do stuff upon completion  
}  
  
function errorCallback() {  
    // Do stuff if error received  
}  
  
$.ajax({  
    url:"http://favicon.png",  
    success:successCallback,  
    complete:completeCallback,  
    error:errorCallback  
  
});

Learning the front of the students pay attention! ! !
Learning process encountered any problems or want access to learning resources, then welcome to join the front group study exchange 461 593 224 , we learn together the front!

Guess you like