Callback function concept: A callback function is a function called through a function pointer. If you pass the pointer (address) of the function as an argument to another function, when this pointer is used to call the function it points to, we say this is a callback function.
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.
Reasons for using callback functions: You can separate the caller from the callee. The caller does not care about who is the caller. All it needs to know is that there is a called function with a certain prototype and certain restrictions (such as the return value is int).
Consider an example like this:
If the bottom and high-level of a project are coordinated by different personnel. The bottom is responsible for data access, and the top is responsible for data representation. When the top is to use the data of a certain module, he said to the bottom personnel, I need you. Provide data that meets a certain requirement, and you provide me with an interface.
The underlying staff said: I will provide you with data, and how to display and process it is your business. I cannot provide a data interface for every need of your needs, and I will provide you with an interface to pass. You get the data and then you will be yourself. Write functions to display. As a result, after negotiation, both parties provide an interface like this:
The code copy is as follows:
//data represents the data source provided by the underlying layer, and funcName represents the call function of the higher layer
function(data,funcName){
1.data belongs to case 1 and is handled by the underlying layer;
2.Data belongs to case 2. It is processed by the high-level. How to deal with it? Use the function funcName provided by the high-level.
...
}
I may not have made it clear yet, we can see an example and understand it all at once
The code copy is as follows:
//If the data source provided is an integer, which is a student's score, when num<=0, it is processed by the underlying layer, and when n>0, it is processed by the upper layer.
//Copy the following function and save it to 1.js
function f(num, callback){
if(num<0) {
alert("Call low-level function to process!");
alert("The score cannot be negative, input error!");
}else if(num==0){
alert("Call low-level function to process!");
alert("The student may not have taken the exam!");
}else{
alert("Call high-level function processing!");
callback();
}
}
The code copy is as follows:
//Save the following test.html file in the same directory as 1.js:
<! Doctype html public "-// W3C // dtd html 4.01 transitional // en"
"http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<script src="1.js" type="text/javascript"></script>
<title>Unt titled document</title>
<script type="text/javascript">
function test(){
var p=document.getElementById("pp");
pp.innerText="";
var num=document.getElementById("score").value;
f(num,function(){ //Anonymous high-level processing function
if(num<60) alert("Failed!");
else if(num<=90) alert("The generation is excellent!");
else alert("Excellent results for this generation!"); })
pp.innerText="by since1978 qq558064!"
}
</script>
</head>
<body>
<p>
Callback function example: When the student score is score<=0, it is processed by the underlying layer; when the score>0, it is processed by the senior layer.
</p>
Please enter student scores <input type="text" id="score">
<input type="button" onClick="test()" value=" Look at the result">
<p id="pp"></p>
</body>
</html>
Run this file and you can see the effect