1
kaotik
Tutorial Jquery: Chaining
  • 2010/5/6 14:51

  • kaotik

  • Just can't stay away

  • Posts: 861

  • Since: 2004/2/19


To show what chaining is I'm going to use some of my own code.
This is a function I use in ajax. When an action is completed and everthing went OK, a message shows up during X time then disappears.
$("#tstme").click(function(){
            
notice('this is ok');
        });
 function 
notice($msg){
        $(
".notice").html($msg);
        $(
".notice").show();
        $(
".notice").delay(3500);
        $(
".notice").slideUp(300);
    }

As you can see, when someone clicks on the link "tstme", function 'notice' is then executed. Here's the logic:
$(".notice").html($msg); set the text inside the div called 'notice'
$(".notice").show(); Show the div since what was initially hidden
$(".notice").delay(3500); Display this message for X amount of time
$(".notice").slideUp(300); Slideup the div

Each time I made a call to $(".notice"), jquery had to process and associate this call to each event. For a small script and few page views you won't notice. But what if your site grows?
This is where chaining comes into play. This same code could be written like this:
$("#tstme").click(function(){
            
notice('this is ok');
        });
function 
notice($msg){
       $(
".notice").html($msg).show().delay(3500).slideUp(300);
    }

Now jquery will associate several event handlers to one event. It obeys the order in which they are placed. This speeds up your code.

Login

Username:
Password:

Lost Password? Register now!

Who's Online

62 user(s) are online (37 user(s) are browsing Support Forums)


Members: 0


Guests: 62


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: May 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits