Javascript callback function application example
- 2020-03-30 02:05:34
- OfStack
Callback function concept: a callback function is a function called through a function pointer. If you pass a function's pointer (address) as an argument to another function, we say it is a callback function when the pointer is used to call the function it points to.
JS Api: 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 functions: you can separate the caller from the called. The caller doesn't care who is being called, all it needs to know is that there is a called function with a certain stereotype and certain constraints (such as an int return value).
Consider an example like this:
If a project is completed by different people, the bottom layer is responsible for data access, and the top layer is responsible for data presentation.
The person at the bottom said: I provide you with the data, how to show and handle it is your business. I cannot provide you with a data interface for every requirement, I provide you with a pass interface. You get the data, and then write the function to show.
I may not have made it clear, but let's look at an example and we'll see at once
Run this file to see the effect
JS Api: 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 functions: you can separate the caller from the called. The caller doesn't care who is being called, all it needs to know is that there is a called function with a certain stereotype and certain constraints (such as an int return value).
Consider an example like this:
If a project is completed by different people, the bottom layer is responsible for data access, and the top layer is responsible for data presentation.
The person at the bottom said: I provide you with the data, how to show and handle it is your business. I cannot provide you with a data interface for every requirement, I provide you with a pass interface. You get the data, and then write the function to show.
//Data represents the data source provided at the bottom, and funcName represents the calling function at the top
function(data,funcName){
1.data Belong to the situation 1, Handled by the bottom layer ;
2.data Belong to the situation 2, Handled by high level , How to deal with it ? Take advantage of the functions provided by the higher level funcName To deal with
.....
}
I may not have made it clear, but let's look at an example and we'll see at once
//Suppose the data source provided is an integer, the score of a student, when num<=0, processed by the bottom layer, when n> At 0, it is handled by the higher level.
//Copy the following function and save it as 1.js
function f(num,callback){
if(num<0) {
alert(" Call low-level function processing !");
alert(" The 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 the high-level function handle !");
callback();
}
}
//Save the following test.html file in the same directory with 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> Headless 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 handler
if(num<60) alert(" Did not pass the exam! ");
else if(num<=90) alert(" The student got good grades! ");
else alert(" The student has an excellent record !"); })
pp.innerText="by since1978 qq558064!"
}
</script>
</head>
<body>
<p>
Example callback function : When students get grades score<=0 Divided by time, by the bottom processing; when score>0 , by the high-level processing.
</p>
Please enter the student's grade <input type="text" id="score">
<input type="button" onClick="test()" value=" Look at the results ">
<p id="pp"></p>
</body>
</html>
Run this file to see the effect