Learning notes for callback functions in js and learning notes for callback Functions

Learning notes for callback functions in js and learning notes for callback Functions

What is a callback function? Before learning it, I really don't know how to use and use the js callback function. The following article will introduce the callback function examples to you, if you have any questions, do not go to the reference page.

Callback function principle:

I am leaving now, to inform you"
This is an asynchronous process. In the process of "I am going" (function execution), "you" can do anything and "now" (function execution is complete) "notify you" (callback) after the process

Example

1. Basic Methods

<script language="javascript" type="text/javascript">function doSomething(callback) {// … // Call the callbackcallback('stuff', 'goes', 'here');} function foo(a, b, c) {// I'm the callbackalert(a + " " + b + " " + c);} doSomething(foo); </script>

Or use an anonymous function.

<Script language = "javascript" type = "text/javascript"> function dosomething (damsg, callback) {alert (damsg); if (typeof callback = "function ") callback ();} dosomething ("callback function", function () {alert ("is the same as the callbacks form of jQuery! ") ;}); </Script>

 
2. Advanced methods
 
Call method using javascript

<script language="javascript" type="text/javascript">function Thing(name) {this.name = name;}Thing.prototype.doSomething = function(callback) {// Call our callback, but using our own instance as the contextcallback.call(this);} function foo() {alert(this.name);} var t = new Thing('Joe');t.doSomething(foo); // Alerts "Joe" via `foo`</script>

 
PASS Parameters

<script language="javascript" type="text/javascript"> function Thing(name) {this.name = name;}Thing.prototype.doSomething = function(callback, salutation) {// Call our callback, but using our own instance as the contextcallback.call(this, salutation);} function foo(salutation) {alert(salutation + " " + this.name);} var t = new Thing('Joe');t.doSomething(foo, 'Hi'); // Alerts "Hi Joe" via `foo`</script>

Use javascript apply to pass Parameters

<script language="javascript" type="text/javascript">function Thing(name) {this.name = name;}Thing.prototype.doSomething = function(callback) {// Call our callback, but using our own instance as the contextcallback.apply(this, ['Hi', 3, 2, 1]);} function foo(salutation, three, two, one) {alert(salutation + " " + this.name + " – " + three + " " + two + " " + one);} var t = new Thing('Joe');t.doSomething(foo); // Alerts "Hi Joe – 3 2 1" via `foo`</script>

Example
// Assume that the data source is an integer, which is the score of a student. When num <= 0, it is processed by the underlying layer, and when n> 0, it is processed by the high-level layer.

// Copy the following function and save it as 1.js.

Function f (num, callback) {if (num <0) {alert ("calls low-level function processing! "); Alert (" the score cannot be negative. incorrect input! ");} Else if (num = 0) {alert (" Call lower-level function processing! "); Alert (" this student may not take the test! ");} Else {alert (" calls high-level function processing! "); Callback ();}}

// Store the following test.html file and 1. js in the same directory:

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 
The following is a supplement from other netizens:
Callback mode in javascript:
Shape:
Function writeCode (callback) {// execute some things, callback ();//...} function intrduceBugs (){//.... introduce vulnerability} writeCode (intrduceBugs );
We pass the application of the function to writeCode (), so that writeCode can execute it when appropriate (it will be called after return)
Let's take a look at a very bad example (we need to refactor it later ):
// Simulate the dom node on the page and return the nodes in the array. // This function is only used to find the nodes that do not perform any logic processing on the dom node. var findNodes = function () {var I = 100000; // a large number of loops, var nodes = []; // used to store the found dom node var found; while (I) {I-= 1; nodes. push (found);} return nodes;} // hide all the dom nodes found in the search. var hide = function (nodes) {var I = 0, max = nodes. length; for (; I <max; I ++) {// brackets after findNodes indicate immediate execution. Execute findNodes () first and then execute hide () 

JS callback function
The callback function can continue to expand the functions of a function, which can be very flexible.
For example:
Function showDiv (callback ){
$ ("# Div1"). show ();
Callback ($ ("# div1 "));
}

ShowDiv (function ($ div ){
$ Div. text ("hello world ");
});
// The original showDiv function is actually a div. After the callback function is added, the text in the div can be changed after the show function is executed.

In general, the callback function has many examples in asynchronous mode, because in asynchronous mode, the callback function can only continue to execute an action.
For example:
Function myThread (callback ){
Return setTimeout (1000*10, function (){
$ ("# Div"). append ("<p> hello </p>"); // Add a row in the div after 10 seconds, and then execute the callback function
Callback ();
});
}

What is a JS callback function?
A callback function is a function that is executed after a function is executed. For example:
Function (callback ){
// Code
// Execute the callback function after the preceding code is executed.
If (typeof callback = "function "){
Callback ();

}

}
This is because functions in js can be directly transmitted as parameters.