Callback when animations created dynamically finish

Question

I have the follwing code where I am adding effects from two loops inside queues:

tablaActual = ({
    1111: {
        titulo: "Nuevo Video 1",
        usuario: "RadioBot",
        alta: "1353182478"
    },
    2243: {
        titulo: "Old Boy Fashion",
        usuario: "RadioBot",
        alta: "1353182479"
    },
    3432: {
        titulo: "Britney spears",
        usuario: "RadioBot",
        alta: "1353182825"
    }
});

tablaNueva = ({
    1111: {
        titulo: "Nuevo Video 1",
        usuario: "RadioBot",
        alta: "1353182478"
    },
    1112: {
        titulo: "Nuevo video 2",
        usuario: "RadioBot",
        alta: "1353182477"
    },
    1113: {
        titulo: "Nuevo video 3",
        usuario: "RadioBot",
        alta: "1353182476"
    }
});


$("button").bind("click", function() {

    var body = $('body');

    retardation = 500;
    i = 1;

    // we delete the old ones that doesnt match in the new table
    $.each(tablaActual, function(index) {
        if (!tablaNueva[index]) {
            delay = i * retardation;

            $('#lista #id' + index).delay(delay).slideUp("normal", function() {
                $(this).remove();
            }).queue("cola1");

            delete tablaActual[index];
            i++;
        }
    });

    // we add the new ones that doesnt match in the old table
    $.each(tablaNueva, function(index, vars) {
        if (!tablaActual[index]) {

            delay = i * retardation;
            $('<tr id="id' + index + '"><td class="cancion"><h3>' + vars.titulo + '</h3></td><td class="autor">' + vars.usuario + '<span>' + vars.alta + '</span></td></tr>').appendTo('#lista').hide().delay(delay).show('slow').queue("cola2");


            tablaActual[index] = vars;
            i++;


        }
    });

    $("tr:animated").promise().done(function() {

        alert("done");
    });


});

jsFiddle

When all the TR animations finish, it should trigger the alert, but I think I'm doing it wrong because the alert pops up as soon as I click the run button.

How do I do this?

Answer 1

I'd use jQuery.Deferred() to make it work. By doing this, you queue up a number of deferred objects that resolve once the corresponding item animation has finished.

In short, create an array of deferred objects and wait for them using the somewhat odd construct jQuery.when.apply(...).done(function() { ... }) .

Take a look at this JSFiddle .

Answer 2

You could move your alert (finish callback) in the callback of the show function and test if all animations have been done : http://jsfiddle.net/dSGWx/12/

var totalmacth=0;
var loop=0;
// los que se tienen que añadir
$.each(tablaNueva, function(index, vars) {
    if (!tablaActual[index]) {
    totalmacth++;

    delay = i * retardation;
    $('<tr id="id' + index + '"><td class="cancion"><h3>' + vars.titulo + '</h3></td><td class="autor">' + vars.usuario + '<span>' + vars.alta + '</span></td></tr>').appendTo('#lista').hide().delay(delay)
         .show('slow',function(){
              loop++; 
              console.log(loop + ' ' + totalmacth)                
              if(loop === totalmacth)
                  alert("done");

          });
    tablaActual[index] = vars;
    i++;
    }      
});