Javascript 为图像一张一张地制作动画

【问题标题】：Javascript animate images one by oneJavascript 为图像一张一张地制作动画
【发布时间】：2012-09-10 23:31:14
【问题描述】：

大家好，我正在开发 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);
}

【问题讨论】：

标签： javascript arrays for-loop timeout setinterval

【解决方案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);

【讨论】：