javascript - 要素のコレクションにクラスを順番に追加する方法は?

Question

コレクション内の各要素にクラスを追加しようとしています。クラスを要素に追加してから、1〜2秒待ってから、コレクション内の次のクラスにクラスを追加します。

しかし、このコードを使用すると、一度にクラスがそれぞれに追加されます。

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

そして、コードセクションにあるものはすべて、「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 クラスを追加することによるオーバーヘッドが大きくなり、これが期待どおりに動作しない可能性はほとんどありません。