setInterval in for loop

Question

Вот что я пытаюсь сделать: добавьте 1 новое имя класса каждые 3 секунды, а затем остановитесь после добавления 5. Когда я запускаю этот код, он продолжает добавлять классы на неопределенный срок! Он также добавляет 3 класса все в 1 раз.

var linesOfText = ['Testing Second Part', 'Testing Third Part', 'Testing Fourth Part', 'Testing Fifth Part']; 
var j = 1; 
var total = 5; 
for (var i = linesOfText.length - 1; i >= 0; i--) { 

    var myVar = setInterval(function(){ 
     $('.vertical-effectOFF').addClass('vertical-effect-' + j); 
     j++; 
     if (j === total) { 
     console.log('stop!'); 
     clearInterval(myVar); 
     } 
    }, 3000); 
} 

Answer 1

Try вынимая Петля для изменения и j = 5 к j = 0:

var linesOfText = ['Testing Second Part', 'Testing Third Part', 'Testing Fourth Part', 'Testing Fifth Part']; 
var j = 0; 
var total = 5; 
var myVar = setInterval(function(){ 
    $('.vertical-effectOFF').addClass('vertical-effect-' + j); 
    j++; 
    if (j === total) { 
    console.log('stop!'); 
    clearInterval(myVar); 
    } 
}, 3000); 

Это добавит класс каждые 3 секунды, пока не будут добавлены 5 классов.

Answer 2

Использование цикла for для этого не является наилучшим подходом. Он не работает так, как ожидалось, потому что он установил 5 интервалов немедленно до все выполнить через 3 секунды. Просто установите интервал для вызова по имени функции и прекратить его действие, когда j === total

var j = 1; 
var total = 5; 

var myVar = setInterval(intervalAddClass, 3000); 

function intervalAddClass() { 
    $('.vertical-effectOFF').addClass('vertical-effect-' + j); 
    j++; 
    if (j === total) { 
     console.log('stop!'); 
     clearInterval(myVar); 
    } 
} 

Кроме того, нет необходимости в linesOfText, как вы не используете его в вашем коде.