javascript - 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

您正在setInterval为所有queueIdArr元素创建。第一个参数 of setIntervalmust be 是代码中的一个函数(function (){})正在被立即调用，并且 value of (function (){})is 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);