CODEWITHSUNDEEP
jqueryeach
user756659
user756659

Reputation: 3512

callback to function after .each() has completed?

Not sure if this is possible or how to go about it. I am using the following in an $.ajax response which works perfectly fine, however, I need to call the function loadSlider(); AFTER the loop is finished iterating.

if (response.success)
{
    $.each( response.screenshots, function( index, value ) {
        //add the slide
        $( '#slider1' ).prepend( '<li data-id="'+value.screenshot_id+'"><img src="/showimage.php?show='+value.image_filename+'" alt=""></li>' );
        //add the pager
        $( '#rslides-pager' ).prepend( '<li><a href="javascript:;"># here</a></li>' );
    });

    //want to call loadSlider(); AFTER everything above is completed                        
}

Upvotes: 9

Views: 31924

Answers (4)

Ahmad Aghazadeh
Ahmad Aghazadeh

Reputation: 17131

$.each( response.screenshots, function( index, value ) {

    }).promise().done(function () {
            //Completed
});

Sample :

if (response.success)
{
    $.each( response.screenshots, function( index, value ) {
        //add the slide
        $( '#slider1' ).prepend( '<li data-id="'+value.screenshot_id+'"><img src="/showimage.php?show='+value.image_filename+'" alt=""></li>' );
        //add the pager
        $( '#rslides-pager' ).prepend( '<li><a href="javascript:;"># here</a></li>' );
    }).promise().done(function () {
            //Completed
        });


}

Upvotes: -2

Johan Morales
Johan Morales

Reputation: 149

jquery has a jQuery.when(), this provides a way to execute callback functions based on zero or more objects, usually Deferred objects that represent asynchronous events.

jquery $.when reference

Now in your code maybe:

if (response.success) {
    var iterate = $.each( response.screenshots, function( index, value ) {
        // do stuff
    });

   $.when(iterate)
    .then(  loadSlider, myFailure );

}

The first function is on success callback and the other function is on fail callback.

Upvotes: 0

ValeroLlinares
ValeroLlinares

Reputation: 36

You can launch slider in the last iteration, it's easy:

if(response.success)
{
    var count = response.screenshots.length;
    $.each(response.screenshots, function (index, value) {
        //add the slide
        $('#slider1').prepend('<li data-id="' + value.screenshot_id + '"><img src="/showimage.php?show=' + value.image_filename + '" alt=""></li>');
        //add the pager
        $('#rslides-pager').prepend('<li><a href="javascript:;"># here</a></li>');
        if (!--count) {
            //want to call loadslider(); after everything above is completed                        
            loadslider();
        }
    });
}

Upvotes: -1

ThiefMaster
ThiefMaster

Reputation: 318488

$.each() iterates over the array synchronously, so you can simply run your code after the $.each(); call.

if (response.success) {
    $.each( response.screenshots, function( index, value ) {
        // do stuff
    });

    loadSlider();
}

As you mention AJAX: Only the actual success callback (i.e. the function that most likely contains the code you posted) is executed asynchronously. Any code inside that function runs synchronously (unless you call another asynchronous function in there of course).

Upvotes: 27

Related Questions