使用jquery延迟setInterval

Question

＆＃13;

＆＃13;

 setInterval(function() {
   for (i = 1; i < 4; i++) {
     $('.cbx-fadeInLeft-' + i + '').toggleClass('active'); // this will run after every 5 seconds
   }
   //setTimeout(setInterval, 3000);
 }, 5000);

＆＃13;

.cbx-fadeInLeft-1.active {
  color: #3498db;
}
.cbx-fadeInRight-2.active {
  color: #3498db;
}
.cbx-fadeInLeft-3.active {
  color: #3498db;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="list-style:none;color:white;font-size:22px;">
  <li style="margin: 0px 0 40px 0;"></li>
  <li class="cbx-fadeInLeft-1" style="margin: 0 0 18px 0;">XXX</li>
  <li class="cbx-fadeInLeft-2" style="margin: 0 0 15px 0;">YYY</li>
  <li class="cbx-fadeInLeft-3" style="margin: 0 0 15px 0;">ZZZ</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

在上面的代码中，我想延迟代码一段时间n然后再次启动for循环..给你的风格..

我只想一个一个地强调......

Answer 1

您可以将变量i移到setInterval的范围之外，然后使其循环，您只需设置适当的值即可。

var i = 1;
setInterval(function() {
  $('.cbx-fadeInLeft-' + i + '').toggleClass('active');
  i++;
  if (i == 4) {
    i = 1;
  }
}, 1000);

.cbx-fadeInLeft-1.active {
  color: #3498db;
}
.cbx-fadeInLeft-2.active {
  color: #3498db;
}
.cbx-fadeInLeft-3.active {
  color: #3498db;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="list-style:none;color:white;font-size:22px;">
  <li style="margin: 0px 0 40px 0;"></li>
  <li class="cbx cbx-fadeInLeft-1" style="margin: 0 0 18px 0;">XXX</li>
  <li class="cbx cbx-fadeInLeft-2" style="margin: 0 0 15px 0;">YYY</li>
  <li class="cbx cbx-fadeInLeft-3" style="margin: 0 0 15px 0;">ZZZ</li>
</ul>

Answer 2

您的代码就像

var i = 1;
setInterval(function () {
   setActive();
   i++;
 }, 1000);


function setActive() {
  if (i >= $('li').length) {
    i = 1;
  }
  $('li').removeClass('active');
  $('.cbx-fadeInLeft-' + i).toggleClass('active');

}

.cbx-fadeInLeft-1.active{ 
  color:#3498db;
 }

.cbx-fadeInLeft-2.active   
{
 color:#3498db;
}
.cbx-fadeInLeft-3.active
{
 color:#3498db;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="list-style:none;color:white;font-size:22px;">
<li style="margin: 0px 0 40px 0;">   </li>
<li class="cbx-fadeInLeft-1" style="margin: 0 0 18px 0;">  XXX</li>
<li class="cbx-fadeInLeft-2" style="margin: 0 0 15px 0;"> YYY </li>  
<li class="cbx-fadeInLeft-3" style="margin: 0 0 15px 0;">  ZZZ</li>
</ul>