CODEWITHSUNDEEP
javascriptjquerysetintervalcycle
Jason Fernald
Jason Fernald

Reputation: 21

Trying to stop setInterval loop on last item

I'm trying to use setInterval to cycle through a list changing classes as it goes until the last item. It is working but I've been unable to stop it from cycling. I'd also like to have the last item to end on a unique class. This is what I've got so far.

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

Something like this

var toggleSlide = function(){

$("#provision1 li.in-progress").removeClass('in-progress').addClass('complete')
    .next().add("#provision1 li:first").last().addClass("in-progress");
}

setInterval(toggleSlide, 1000);

Upvotes: 2

Views: 361

Answers (3)

Bagi
Bagi

Reputation: 191

Change JS with following

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

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196197

Try this 

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);

Demo

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>

Upvotes: 1

Manu Masson
Manu Masson

Reputation: 1747

To stop a setInterval(); you can use clearInterval(); like so:

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

Upvotes: 0

Related Questions