Javascript callback function application example_javascript skills-JS Tutorial-php.cn

Javascript callback function application example_javascript skills

WBOY

Release： 2016-05-16 16:59:06

Original

960 people have browsed it

Callback function concept: A callback function is a function called through a function pointer. If you pass a function pointer (address) as a parameter to another function, and when this pointer is used to call the function it points to, we say it is a callback function.

JS Api explains this: A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

The reason for using callback function: you can The caller is separated from the callee. The caller doesn't care who the callee is, all it needs to know is that there is a called function with a certain prototype and certain restrictions (such as a return value of int).

Consider an example like this:

Suppose the bottom and top levels of a project are completed by different people. The bottom level is responsible for data access, and the top level is responsible for data presentation. When the top level wants to The data of a certain module was used, so he said to the bottom-level staff, I need you to provide data that meets certain needs, and you provide me with an interface.

The bottom-level staff said: I will provide you with the data. How to display and process it is your business. It is impossible for me to provide a data interface for every need. I will provide you with a passable interface. You get the data and then write your own function to display it. After negotiation, both parties Provides such an interface:

Copy code The code is as follows:

 
//data represents the bottom layer The data source provided, funcName represents the high-level calling function 

function(data, funcName){ 

1.data belongs to case 1 and is processed by the bottom layer; 

2.data It belongs to situation 2 and is handled by the higher level. How to deal with it? Use the function funcName provided by the higher level to handle 

... 

}

I may not have To make it clear, let’s look at an example and understand it at once

Copy the code The code is as follows:

 
 //If the data source provided is an integer, which is a student's score, when num<=0, it will be processed by the bottom layer, and when n>0, it will be processed by the high-level layer. 

//Copy the following function Save as 1.js 

function f(num,callback){ 
if(num<0) { 
alert("Call low-level function processing!"); 
alert("Score Cannot be negative, input error!"); 
}else if(num==0){ 
alert("Call low-level function processing!"); 
alert("The student may not have taken the exam! "); 
}else{ 
alert("Call high-level function processing!"); 
callback(); 
} 
} 

Copy code The code is as follows:

//Save the following test.html file in the same directory as 1.js :

"http://www.w3.org/TR/html4/loose.dtd" >

Untitled Document

Callback function example: when When the student score<=0, it will be processed by the bottom layer; when the score>0, it will be processed by the upper layer.

Please enter the student score

Run this file and you can see the effect