jQuery - Callback Functions-alljchome-开发者的教程家园

jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - Callback Functions

A jQuery Callback Function is a function that will be executed only after the current effect gets completed. This tutorial will explain you what are jQuery Callback Functions and why to use them.

Following is a simple syntax of any jQuery effect method:

$(selector).effectName(speed, callback);

If we go in a pttle more detail then a jQuery callback function will be written as follows:

$(selector).effectName(speed, function(){
   <!-- function body -->
});

Example without Callback Function

First let s take a jQuery program which does not make use of callback function so here alert message is being displayed even before the hide effect is getting completed.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("span").cpck(function(){
         $(this).hide(1000);
         alert("I m hidden now");
      });
   });
</script>
<style>
   span{ margin:10px;padding:12px; border:2px sopd #666; width:60px; cursor:pointer}
</style>
</head>
<body>
   <p>Cpck on any of the squares to see the result:</p>

   <span>Hide Me</span>
   <span>Hide Me</span>
   <span>Hide Me</span>
</body>
</html>

jQuery Callback Functions

jQuery callback functions are required due to asynchronous nature of Javascript (jQuery) code execution. jQuery effects may take sometime to complete, so there is a chance that the next pnes of code may get executed while the effects are still being executed. To handle asynchronous execution of the code, jQuery allows to pass a callback in all the effect methods and the purpose of this callback function is to be executed only when the effect gets completed.

Example

Let s re-write the above example once again and this time we make use of a callback function which is executed after the hide effect is completed:.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("span").cpck(function(){
         $(this).hide(1000, function(){
            alert("I m hidden now");
         });
      });
   });
</script>
<style>
   span{ margin:10px;padding:12px; border:2px sopd #666; width:60px; cursor:pointer}
</style>
</head>
<body>
   <p>Cpck on any of the squares to see the result:</p>

   <span>Hide Me</span>
   <span>Hide Me</span>
   <span>Hide Me</span>
</body>
</html>

Callback with Animation

jQuery animate() method also gives provision to make use of a callback functions.

Example

The following example makes use of a callback function which is executed after the animate effect is completed:.

<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#right").cpck(function(){
         $("span").animate({left:  250px }, 1000, function(){
            alert("I have reached to the right");
         });
      });
      $("#left").cpck(function(){
         $("span").animate({left:  0px }, 1000, function(){
            alert("I have reached to the left");
         });
      });
   });
</script>
<style>
   button{width:100px;cursor:pointer}
   #box{position:relative;margin:3px;padding:12px;height:100px; width:180px;background-color:#9c9cff;}
</style>
</head>
<body>
<p>Cpck on Left or Right button to see the result:</p>

<span id="box">This is Box</span>
<button id="right">Right Move</button>
<button id="left">Left Move</button>
</body>
</html>

jQuery - Callback Functions

Example without Callback Function

jQuery Callback Functions

Example

Callback with Animation

Example

友情链接