试图阻止最后一项上的setInterval循环

Question

我试图使用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); 

Answer 1

要停止setInterval();你可以使用clearInterval();像这样：

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

Answer 2

试试这个

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>

Answer 3

变化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