CODEWITHSUNDEEP
javascriptjqueryhtml
Jothi Kannan
Jothi Kannan

Reputation: 3358

Jquery setInterval and clearInterval

I want to highlight a list items one by one, once it reaches the final list item, highlight should be removed

setInterval is working, but when i use clearInterval to remove the Interval it doesn't work

<ul>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
</ul>


var $anchors = $('a.anchor'), counter = 0;
var interval;
interval = setInterval(function(){
 $anchors.removeClass('highlight');
  $anchors.eq(counter++ % $anchors.length).addClass('highlight');
    if($anchors.length==5){
    clearInterval(interval);
}
}, 4000);

anyway to clear the interval when it reaches the final list item ?

Fiddle link : DEMO

Update : Sorry i was wrong in code, corrected the code, still same issue

Upvotes: 1

Views: 2191

Answers (5)

brk
brk

Reputation: 50291

$('a.anchor') will return a array list of 5 elements so you have to check it till 4

var $anchors = $('a.anchor'),
    counter = 0;
    var interval;
    var o = setInterval(function(){
     interval= $anchors.removeClass('highlight');
      var m = counter++ % $anchors.length
      $anchors.eq(m).addClass('highlight');
      console.log(m)
        if(m==4){
      clearInterval(o);
       //$anchors.removeClass('highlight'); // Uncomment this if you want to remove the highlighted class
    }

    }, 1000);

jsfiddle

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

Here's a different simpler way to go:

function stopInt(cnt, int) {
    if(cnt > $anchors.length){
        clearInterval(int);
    return false;
  }
}

Call this function at the end of a cycle. Also, I'm not sure how that counter++ % increment modulus is? I simply put the counter++ all by itself and it looks like there's no need to extract the modulus...modulus really?

FIDDLE

SNIPPET

var $anchors = $('a.anchor'),
  counter = 0;
var interval;
setInterval(function() {
  interval = $anchors.removeClass('highlight');
  $anchors.eq(counter).addClass('highlight');
  stopInt(counter, interval);
  counter++;
}, 4000);

function stopInt(cnt, int) {
  if (cnt > $anchors.length) {
    clearInterval(int);
    return false;
  }
}
.highlight {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
</ul>

Upvotes: 1

xAqweRx
xAqweRx

Reputation: 1236

If You want to highlight last one : 

 var $anchors = $('a.anchor'), counter = 0;
    var interval;
    interval = setInterval(function(){
      $anchors.removeClass('highlight');
      $anchors.eq(counter++ % $anchors.length).addClass('highlight');
    	if($anchors.length == counter){
    		clearInterval(interval);
      }
    }, 1000);
.highlight{
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
</ul>

If you don't wont to highlight last one

var $anchors = $('a.anchor'), counter = 0;
var interval;
interval =setInterval(function(){
  $anchors.removeClass('highlight');
  if($anchors.length==counter){
	  clearInterval(interval);
      return;
   }
  $anchors.eq(counter++ % $anchors.length).addClass('highlight');
   
}, 1000);
.highlight{
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
</ul>

Upvotes: 3

T.J. Crowder
T.J. Crowder

Reputation: 1074268

You're using the wrong condition to stop the timer. $anchors.length will always be 5 with what you've shown; want you want to check is counter.

var $anchors = $('a.anchor'),
    counter = 0;
var interval;
interval = setInterval(function() {
    $anchors.removeClass('highlight');
    $anchors.eq(counter++ % $anchors.length).addClass('highlight');
    if (counter == 5) {
//      ^^^^^^^-------------------------------- change is here
        clearInterval(interval);
    }
}, 4000);

Live example:

var $anchors = $('a.anchor'),
  counter = 0;
var interval;
interval = setInterval(function() {
  $anchors.removeClass('highlight');
  $anchors.eq(counter++ % $anchors.length).addClass('highlight');
  if (counter == 5) {
    clearInterval(interval);
  }
}, 400);
.highlight {
  color: red;
}
<ul>
  <li><a href="#" class="anchor">I am an anchor</a>
  </li>
  <li><a href="#" class="anchor">I am an anchor</a>
  </li>
  <li><a href="#" class="anchor">I am an anchor</a>
  </li>
  <li><a href="#" class="anchor">I am an anchor</a>
  </li>
  <li><a href="#" class="anchor">I am an anchor</a>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Note: xAqweRx makes a good point in his solution that using counter == $anchors.length rather than counter == 5 is more robust; that way, when you change the number of anchors, the code keeps working.

Upvotes: 1

Anupam Singh
Anupam Singh

Reputation: 1166

Try :

var interval;
interval = setInterval(function(){
  $anchors.removeClass('highlight');
  $anchors.eq(counter++ % $anchors.length).addClass('highlight');
    if($anchors.length==5){
    clearInterval(interval);
}
}, 4000);

Upvotes: 1

Related Questions