Question

我想使用setTimeout（）为一系列跨度添加一个类，以便以级联方式添加类，创建一个可视化进程，而不是一次性设置它们。我尝试了很多不同的方法。

这是一个代码... http://codepen.io/geirman/pen/nDhpd

codepen试图模仿我在这里找到的一个工作示例...... https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration

问题是我似乎无法连续延迟addClass，所以它一下子发生。这是当前的代码。

 /* The Problem Code
 ********************/

 var span$ = $("span");
 var index = 0;
 var factor = 500;

 function colorSpans(){
   for(var i = 0; i < span$.length; i++){
     setTimeout(function(){
       animate();
     }, factor*index);
   }
   index = 0; 
 }

 function animate(){  
   span$[index++].className = "lg"; 
 }

 colorSpans();

还有一件事，我喜欢这样做没有jQuery，但也会接受jQuery解决方案。

Answer 1

在您当前的代码中，看起来第一次调用animate会立即执行，之后index将为1。但是循环可能在第二个超时处理程序被调用之前完成执行（即，循环不会花费500ms来执行）。因此，这意味着剩余的跨度将立即显示，因为index的值不会更新。

这样的事情应该有效：

function colorSpans() {
    for(var i = 0; i < span$.length; i++) {
       (function(i) {
           setTimeout(function() {
               animate(i);
           }, factor * i);
       })(i); //force a new scope so that the "i" passed to animate()
              //is the value of "i" at that current iteration and not
              //the value of "i" when the loop is done executing.
    }
}

function animate(i) {
    span$[i].className = "lg";
}

上述代码也是首选，因为您没有使用全局变量来维护colorSpans和animate之间的状态（即，我们没有使用index）。

但是，您可以使用setInterval来改进：

var i = 0;
var intervalId = setInterval(function() {
    if(i < span$.length) {
        animate(i);
        i++;
    } else {
        clearInterval(intervalId);
    }
}, 500)

我认为这比setTimeout方法更清晰。

查看更新的代码：

setTimeout使用JavaScript级联动画

1 个答案: