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

无论如何要清除到达最终列表项的时间间隔？

小提琴链接：SocketActivity Trigger

更新：抱歉我的代码错了，纠正了代码，仍然是同样的问题

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

实例：

＆＃13;

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

＆＃13;

.highlight {
  color: red;
}

＆＃13;

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

＆＃13;

注意：使用counter == $anchors.length而不是counter == 5的解决方案中的xAqweRx makes a good point更加健壮;这样，当你改变锚点的数量时，代码就会继续工作。

Answer 4

这是一种不同更简单的方法：

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

在循环结束时调用此函数。另外，我不确定counter++ %增量模数是多少？我简单地将counter++全部放在一起，看起来没有必要提取模数......模数真的吗？

FIDDLE

段

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

Jquery setInterval和clearInterval

5 个答案:

段