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将强制您实现promises功能或添加大约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

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

2 个答案: