jQuery setInterval和clearInterval

Question

我要一個突出顯示一個列表項，一旦到達最后一個列表項，應刪除突出顯示

setInterval在工作，但是當我使用clearInterval刪除Interval時，它不起作用

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

無論如何清除到達最終列表項的時間間隔？

小提琴鏈接： 演示

更新：對不起，我的代碼是錯誤的，更正了代碼，仍然是同樣的問題

Answer 1

如果要突出顯示最后一個：

  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> 

---

如果您不突出顯示最后一個

 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> 

Answer 2

嘗試：

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

Answer 3

您使用了錯誤的條件來停止計時器。 $anchors.length與您顯示的內容始終為5； 想要您要檢查的是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);

現場示例：

 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> 

注：xAqweRx 使得一個好點的是用他的解決方案counter == $anchors.length而非counter == 5更強勁; 這樣，當您更改錨點的數量時，代碼將繼續工作。

Answer 4

這是另一種簡單的方法：

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

在循環結束時調用此函數。 另外，我不確定counter++ %增量模量如何？ 我只是簡單地將counter++全部放了起來，看起來好像沒有必要提取模量...模量嗎？

小提琴

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> 

Answer 5

$('a.anchor')將返回一個包含5個元素的數組列表，因此您必須檢查它直到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