0

我想使用 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 解决方案。

4

1 回答 1

0

在您当前的代码中，看起来第一次调用animate将立即执行，之后index将是1. 但循环很可能在调用第二个超时处理程序之前完成执行（即循环不会花费 500 毫秒来执行）。所以这意味着剩余的跨度将立即出现，因为 的值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";
}

上面的代码也更可取，因为您没有使用全局变量来维护 and 之间的状态colorSpans（animate即，我们没有使用index）。

但是您可以通过使用setInterval来进行额外的改进：

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

我认为这比setTimeout方法更干净。

查看更新的代码笔：

于 2013-09-05T00:00:02.927 回答