Javascript逐个制作动画图像

Question

大家好，我正在开发Javascript Canvas项目，这是一小段不起作用的代码，我只想以100个时间延迟一个接一个地动画图像，但它一次对所有图像进行动画处理。

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

您正在为所有queueIdArr元素创建setInterval。 setInterval的第一个参数必须是代码中的函数(function (){})该函数被立即调用，并且(function (){})的值undefined。

以下可能会解决您的代码。

 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);