Question

I have a problem here with an animation inside a loop. The output is like it should be i guess but not kow i want.

for (var i = 0; i < slots.length; i++) {
  $('#slot-'+i).animate({
    marginTop: -10
  }, 200, function() {
    console.debug(i);
    if (i == 0) somefunction();
  });
}

The problem is that console.debug(i) outputs the last index of the for loop everytime.

What I want to achive is: In the complete function of the animation i want to call a function – BUT ONLY ONCE.

Answer 1

for (var i = 0; i < slots.length; i++) {
    $('#slot-' + i).animate({
        marginTop: -10
    }, 200, (function(count) {
        return function() {
            console.debug(count);
            if (count == 0) somefunction();
        };
    })(i));
}

The problem here is that unless you use an immediately invoked function expression that returns the appropriate success handler for each iteration, all of your handlers will refer to the same value of i.