javascript - 如何按顺序将类添加到元素集合中？

Question

我试图向集合中的每个元素添加一个类。我想向元素添加一个类，然后等待一两秒，然后将该类添加到集合中的下一个。

但是当我使用这段代码时，它只是一次将类添加到每个类中。

for (var i = 0; i < article.length; i++) {
    setTimeout(function () {
        $(article[i]).addClass('something';
        }, 10000);
    }

Answer 1

尝试这样的事情：

 (function step(i){         
     if( i < article.length ){
          $(article[i]).addClass('some_class');
          setTimeout(function(){ step(i+1) },10000);
     }         
 })(0);

Answer 2

问题是您从同一时刻开始设置一堆超时 10 秒，因此它们都将在 10 秒后立即执行。您需要将它们链接在一起，以便每个超时处理程序调用下一个超时：

var i = 0;
var callback;

callback = function () {
    if (i < article.length) {
        $(article[i]).addClass('something');

        ++i;
        setTimeout(callback, 10000);
    }
};

setTimeout(callback, 10000);

Answer 3

您可以使用

var x = setInterval("javascript",ms);

它会每隔“毫秒”一次又一次地调用代码部分中的任何内容，直到您调用

clearInterval(x);

功能

Answer 4

一种无需链接调用的方法：

for (var i = 0; i < article.length; i++) {
    (function(_i) {
    setTimeout(function () {
        $(article[_i]).addClass('something');
    }, 10000+_i*1000);
    })(i);
}

添加 CSS 类的开销不大可能足以使其无法按预期运行。