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.
//Data represents the data source provided at the bottom, and funcName represents the calling function at the top

function(data,funcName){ Belong to the situation 1, Handled by the bottom layer ; 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! "); 
alert(" Call the high-level function handle !"); 

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
<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"); 
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!" 

 Example callback function : When students get grades score<=0 Divided by time, by the bottom processing; when score>0 , by the high-level processing.  
 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> 

Run this file to see the effect

Related articles: