Learning notes for callback functions in JavaScript

Source: Internet
Author: User
Tags anonymous

callback function Principle:

I'm leaving now, I'll let you know.
This is an asynchronous process, "I go" in the process (function execution), "You" can do anything, "to" (function completed) "Notify You" (callback) after the process

Example

The code is as follows Copy Code


1. Basic methods
<script language= "javascript" type= "Text/javascript" >

function DoSomething (callback) {
...

Call the callback
Callback (' Stuff ', ' goes ', ' here ');
}

function foo (A, B, c) {
I ' M The callback
Alert (A + "" + B + "" + C);
}

DoSomething (foo);

</script>

Or in the form of an anonymous function

<script language= "javascript" type= "Text/javascript" >
function DoSomething (damsg, callback) {
alert (damsg);
if (typeof callback = = "function")
Callback ();
}

DoSomething ("callback function", function () {
Alert ("Like the callbacks form of JQuery!");
});


</script>

2. Advanced methods

The call method using JavaScript
<script language= "javascript" type= "Text/javascript" >

function Thing (name) {
THIS.name = name;
}
Thing.prototype.doSomething = function (callback) {
Call we callback, but using our own instance as the context
Callback.call (this);
}

function foo () {
alert (this.name);
}

var t = new Thing (' Joe ');
T.dosomething (foo); Alerts "Joe" Via ' foo '

</script>

Pass parameters
<script language= "javascript" type= "Text/javascript" >

function Thing (name) {
THIS.name = name;
}
Thing.prototype.doSomething = function (callback, salutation) {
Call we callback, but using our own instance as the context
Callback.call (this, salutation);
}

function foo (salutation) {
Alert (Salutation + "" + this.name);
}

var t = new Thing (' Joe ');
T.dosomething (foo, ' Hi '); Alerts "Hi Joe" via ' foo '

</script>
Apply pass parameters using JavaScript
<script language= "javascript" type= "Text/javascript" >

function Thing (name) {
THIS.name = name;
}
Thing.prototype.doSomething = function (callback) {
Call we callback, but using our own instance as the context
Callback.apply (this, [' Hi ', 3, 2, 1]);
}

function foo (salutation, three, two, one) {
Alert (salutation + "+ THIS.name +" – "+ Three +" "+ Two +" "+ one);
}

var t = new Thing (' Joe ');
T.dosomething (foo); Alerts "Hi joe–3 2 1" via ' foo '

</script>

Example
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.

The code is as follows Copy Code

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 ();
}
}

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"
< Html>
<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 qualified!") ");
   Else if (num<=90) alert ("The student has excellent results!") ");
   Else alert ("excellent performance for this student!");}
  pp.innertext= by since1978 qq558064!
 }
</script>

<body>
<p>
Callback Function Example: When the student score is score<=0, it is handled by the bottom, and when score>0, it is handled by the high level.
</p>
Please enter student score <input  type= "text"   id= "score" >
<input type= "button" onclick= "test () "Value= the results"
<p id= "pp" ></P>
</body>

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.