尝试在最后一项上停止 setInterval 循环

Trying to stop setInterval loop on last item

本文关键字：一项 循环 setInterval 最后      更新时间：2023-09-26

我正在尝试使用 setInterval 循环浏览列表，在直到最后一项时更改类。它正在工作，但我无法阻止它骑自行车。我还想让最后一项以一个独特的类结束。这就是我目前所得到的。

<ul id="provision1" class="provisioning-list">
    <li class="in-progress">Configure Active Directory</li>
    <li>Create User Accounts and Groups</li>
    <li>Build Server Configurations</li>
    <li>Create NTFS</li>
    <li>Create Network</li>
    <li>Apply SDN Rules</li>
    <li class="last">Configure Users</li>
</ul>

像这样的东西

var toggleSlide = function(){
$("#provision1 li.in-progress").removeClass('in-progress').addClass('complete')
    .next().add("#provision1 li:first").last().addClass("in-progress");
}
setInterval(toggleSlide, 1000);

试试这个 

var toggleSlide = function(){
    var current = $("#provision1 li.in-progress"),
        next = current.next();
    // stop if there is no next element or we reached the .last element
    if (current.is('.last') || next.length === 0){
       clearInterval( timer );
       return;
    }
    current.removeClass('in-progress');
    next.addClass('in-progress');
    },
    timer = setInterval(toggleSlide, 1000);

演示

var toggleSlide = function() {
        var current = $("#provision1 li.in-progress"),
          next = current.next();
        // stop if there is no next element or we reached the .last element
        if (current.is('.last') || next.length === 0) {
          clearInterval(timer);
          return;
        }
        current.removeClass('in-progress');
        next.addClass('in-progress');
      },
      timer = setInterval(toggleSlide, 1000);
.in-progress{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="provision1" class="provisioning-list">
  <li class="in-progress">Configure Active Directory</li>
  <li>Create User Accounts and Groups</li>
  <li>Build Server Configurations</li>
  <li>Create NTFS</li>
  <li>Create Network</li>
  <li>Apply SDN Rules</li>
  <li class="last">Configure Users</li>
</ul>

要停止setInterval();您可以使用如下clearInterval();：

var intv = setInterval(toggleSlide, 1000);
clearInterval(intv);

使用以下更改 JS

var toggleSlide = function(){
    var $cur_element = $("#provision1 li.in-progress");
    $cur_element.removeClass('in-progress')
  .addClass('complete');
  if($cur_element.hasClass("last")) {
    clearInterval(interval_var);
  } else {
    $cur_element.next().add("#provision1 li:first")
    .last().addClass("in-progress");
  }
}
var interval_var = setInterval(toggleSlide, 1000);

JSFiddle

相关文章：