JavaScript callback function application Example _javascript tips

Source: Internet
Author: User
callback function Concept: A callback function is a function called by a function pointer. If you pass the pointer (address) of a function to another function as an argument, when the pointer is used to call the function it points to, we say this is a callback function.

This is explained in the JS Api: A callback is a function which is passed as a argument to another function and are executed after its parent F Unction has completed.

Why you use the callback function: You can separate the caller from the callee. The caller does not care who the callee is, all it needs to know is that there is a called function that has a particular stereotype, some restrictions, such as a return value of int.

Consider an example of this:

If the bottom and top of a project are coordinated by different people. The bottom is responsible for data access, and the high-level is responsible for the presentation of data. When the top level wants to use a module's data, he says to the bottom up, "I need you to provide data that meets a certain requirement, and you provide me with an interface."

The people at the bottom said, "I'm offering you data, how to show and deal with it is your business. I can't give you a data interface for each requirement, and I'll provide you with an interface to pass through. You get the data, and then you write the function to show it. By negotiation, the two sides provide one such interface:
Copy Code code as follows:

Data represents the underlying source of the funcname, which represents the call function at the top.

function (data,funcname) {

1.data belongs to Case 1, which is treated by the bottom layer;

2.data belongs to the case 2, by the high-level treatment, how to deal with it? Using the functions provided by the high level funcname processing

.....

}

I may not have made myself clear, we'll see an example.
Copy Code code as follows:

If the provided data source is an integer, for a student's score, when the num<=0, is processed by the bottom, when n>0 is handled by the high-level.

Copy the following function and save it to 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 code as follows:

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

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<script src= "1.js" type= "Text/javascript" ></script>
<title> Untitled 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 ("Not a grid!") ");
else if (num<=90) alert ("The student has excellent results!") ");
Else alert ("The student has excellent results!"); })
Pp.innertext= "by since1978 qq558064!"
}
</script>

<body>
<p>
Example of a callback function: When a student's score is score<=0, it is handled by the bottom, and when score>0, it is handled by the top.
</p>
Please input the student achievement <input type= "text" id= "score" >
<input type= "button" onclick= "Test ()" value= "See results" >
<p id= "pp" ></p>
</body>

Run this file to see the effect
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.