Jquery Wait for another function

Question

Hi all

I'm rather new to Jquery and have a quick question.

I have two Jquery functions which both seems to start onload but I want to delay the one function until Function 1 has completed :

$(document).ready(function() {
//DO SOME AJAX STUFF HERE AND CALL FUNCTION TWO BELOW WHEN DONE
});

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({            
        itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
    });
});

Thanks.

Answer 1

You should call the second function from the callback of the first ajax function.

For example:

$(document).ready(function() {
   MyAjaxMethod(function() {

       jQuery('#mycarousel').jcarousel({            
           itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
       });

   });
}

Answer 2

All Ajax functions have callbacks that are executed when the processing is completed. This is the recommended way of doing things in jQuery.

For example:

$("selector").load(url, function() {
  // Put your second function here
});

Answer 3

The Ajax method in jQuery has a callback parameter which you can use to specify a function that should be called when the request has completed. For example:

$(function()
{
    $.ajax('url', {}, function(data)
    {
        // Do your stuff here.
    }, 'json');
});

Also, note that $(function()... is equivalent to $(document).ready(function()... but is more concise!

Answer 4

$.get and and $.post both allow callbacks:

jQuery.post( url, [data], [callback], [type] )

So get the jcarousel method to run once the post has completed:

$(document).ready(function() {
    $.post(url, data, function(
      jQuery('#mycarousel').jcarousel({            
         itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
     });

    ));
});