SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to chain/callback UDFs with jQuery?

    I have 2 UDFs that need to be called sequentially.

    Traditionally, Javascript will call function1() which once its commands are initiated, will then call function2(). Thing is, function1() has jQuery based animations, and I only want it to return and call function2() when it's done. Since UDF's don't seem to have jQuery's callbacks built into them, can anyone think of a way I can do this with my UDFs?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If you're animating with jQuery you should be able to use its callbacks to call the second function.

    e.g. something along the lines of:

    Code javascript:
    function fn1( cb ) {
        $("#something").fadeIn(500, function() {
            cb.call(); // call the callback after the animation finishes
        });
    }
     
    function fn2() {
        //do something
    }
     
    fn1( fn2 );
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well, here's the deal.

    I have a function that is being executed, it gets to a point where it needs to call functionA() first and then functionB() after functionA() is done with the animations it runs.

    function executingNow() {
    // call function A, which runs jQuery animations
    functionA();

    // call function B, which needs to only run after functionA is done.
    functionB();
    }

    As expected (but not wanted), Javascript executes functionA() and begins the animations. But then it immediately runs functionB() rather than wait for A's animations to end.

    Both functions take params, so ultimately I was hoping jQuery could just begin a series of functions (and their params) and as long as those params allow all their operations to complete before they return, it would work as needed.

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yup, I totally get where you're going with this.

    JavaScript is pretty flexible in that you can also pass functions as arguments to other functions. So for a normal scenario, we could do something like this:

    Code javascript:
    function functionA( stringOne, stringTwo, callbackFunction ) {
        var result = stringOne + stringTwo; //do something with stringOne and stringTwo
        //when done:
        callbackFunction( result );
    }
     
     
    function functionB( someResult ) {
        //do something with someResult
    }
     
     
    function executingNow() {
        functionA( "First", "Second", funcionB );
    }

    Of course, if functionA does some jQuery animations, those animations will be started, and then functionB would still be called before the animations finish.

    This is why we would use the callback functionality in the jQuery animation functions to only execute code once they finish.

    You would amend functionA to then only call the callbackFunction when the animation finishes:

    Code javascript:
    function functionA( stringOne, stringTwo, callbackFunction ) {
        var result = stringOne + stringTwo; //do something with stringOne and stringTwo
     
        $("#something").html(result).fadeIn(500, function() {
            callbackFunction( result ); //call this when the animation is finished
        });
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •