Question

这是我正在尝试做的事情：每3秒添加1个新的类名，然后在添加5个之后停止。当我运行此代码时，它会无限期地添加类！它还一次增加3个课程。

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

尝试取出for循环并将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循环不是最佳方法。它没有按预期运行，因为它在3秒后设置5个间隔立即到所有执行。只需设置调用命名函数的时间间隔，并在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，因为您没有在代码中使用它。

for循环中的setInterval

2 个答案: