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