Question

hi all I am developing Javascript Canvas project and here is the small piece of code that doesn’t work, I simply want to animate images one by one with 100 time delay, but it animates all images at once.

for (var i = 0; i < queueIdArr.length; i++){ // queueIdArr.length = 4
    (function(i){
        var animInterval = window.setInterval((function(i){
            if (i == (queueIdArr.length - 1)){
                animate(queueIdArr[i], {opacity: 0}, animationDuration, "delete"); // my own function, it works fine. animate (id, new_properties, duration, callback);
                window.clearInterval(animInterval);
            } else {
                animate(queueIdArr[i], {opacity: 0}, animationDuration, "delete");
            }
        })(i), 100);
    })(i);
}​

Answer 1

You are creating setInterval for all the queueIdArr elements.
First arguments of setInterval must be a function in your code (function (){}) is is being called immediately and value of (function (){}) is undefined.

Following may solve your code.

 var i =0;  
    var animInterval = window.setInterval(function(){
        if (i == (queueIdArr.length - 1)){
            animate(queueIdArr[i], {opacity: 0}, animationDuration, "delete"); 
            window.clearInterval(animInterval);
        } else {
            animate(queueIdArr[i], {opacity: 0}, animationDuration, "delete");
        }
        i++;
    }, 100);