Home > Developer > JavaScript
Examples of jQuery callback function definition and usage
This document describes the definition and usage of jQuery callback functions. Share it with you for your reference. The specific analysis is as follows:
In jQuery code, callback functions are widely used and it is necessary to have a precise understanding of them. The following is a brief introduction to this method through examples.
The code example is as follows:
With the callback function, a prompt box is displayed after all the divs are hidden.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> helping customers </title>
<Style type = "text/css">
Div {
Height: 150px;
Width: 150px;
Background-color: green;
Margin-top: 10px;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). slideUp (2000, function () {alert ("hidden ")});
})
})
</Script>
</Head>
<Body>
<Div> </div>
<Button> click to view results </button>
</Body>
</Html>
The above code runs very well and is ordered. In many practical applications, you often want the code to complete an action before performing another action.
The Code seems to have the same effect as the above Code, but the running result is not as expected. Instead, a prompt box is displayed first, and then the div element is hidden. This does not mean that slideUp () has not started execution.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> helping customers </title>
<Style type = "text/css">
Div {
Height: 150px;
Width: 150px;
Background-color: green;
Margin-top: 10px;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). slideUp (2000 );
Alert ("hidden ");
})
})
</Script>
</Head>
<Body>
<Div> </div>
<Button> click to view results </button>
</Body>
</Html>
Below is a simple summary of what is a callback function. See the following code:
Copy codeThe Code is as follows:
Function a () {alert ("I Am a function ")}
A ();
The above is the most common method to call a function. It is called directly using the function implementation, but the callback function is not like this. It passes its own address as a parameter to another function, when a specific event occurs, the callback function address passed as a parameter is used to call the callback function. Take the code using the callback function as an example. It passes the function address as a parameter to the slideUp () method. After the slideUp () action is completed, the function is called through the passed address parameter.
I hope this article will help you with jquery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
