逐个添加类，每个类在一秒后添加

Question

我的目标：逐个添加类[test0 test1 test2]直到10，每个类在一秒钟后添加

$('.rating-block').AddClass('test0 test1 test2 ... test10' );

我的代码[只是尝试使用此代码，对此代码没有更多想法]

       for ( var i = 0; i < 11 ; i = i + 1 ) {
             setTimeout(function(){
                $( ".rating-block" ).addClass('test' +i);
                console.log(  i );
            },1000);
       }

Answer 1

最好在这里使用setInterval：

var i = 0
  , interval = null;

interval = setInterval(function(){
    $( ".rating-block" ).addClass('test' +i);
    i++;
    if( i == 11 ) {
        clearInterval( interval );
    }
},1000);

因为使用setTimeout 将迫使您实现承诺功能或添加大约 10 个回调，您的代码会很丑。

编辑：

要反转，您可以简单地扩展上面的代码并添加另一个 setInterval

if( i == 11 ) {
    clearInterval( interval );
    i = 10;
    interval = setInterval(function(){
        if( i == 0 ) {
            clearInterval( interval );
        }
        $( ".rating-block" ).removeClass('test' +i);
        i--;
    },1000);
}

jsFiddle demo

Answer 2

for ( var i = 0; i < 11 ; i = i + 1 ) {
    (function (j) {
        setTimeout(function () {
            $( ".rating-block" ).addClass('test' + j);
            console.log( j );
        }, i * 1000);
    }(i));
}

JSFiddle Demo.

---

更新：您可以简单地反转它：

for ( var i = 10; i >= 0 ; i = i - 1 ) {
    (function (j) {
        setTimeout(function () {
            $( ".rating-block" ).removeClass('test' + j);
            console.log( j );
        }, (11 - i) * 1000);
    }(i));
}

您甚至可以将这些代码作为函数并循环（从 0 到 10 相加，然后从 10 到 0 移除，依此类推）：

function addClasses() {
    for ( var i = 0; i < 11 ; i = i + 1 ) {
        (function (j) {
            setTimeout(function () {
                $( ".rating-block" ).addClass('test' + j);
                console.log( j );
            }, i * 1000);
        }(i));
    }

    setTimeout(function () {
        removeClasses();
    }, 10 * 1000);
}

function removeClasses() {
    for ( var i = 10; i >= 0 ; i = i - 1 ) {
        (function (j) {
            setTimeout(function () {
                $( ".rating-block" ).removeClass('test' + j);
                console.log( j );
            }, (11 - i) * 1000);
        }(i));
    }

    setTimeout(function () {
        addClasses();
    }, 10 * 1000);
}

addClasses();

JSFiddle Demo.