Javascript Jquery setInterval和clearInterval

我想一个一个地突出显示一个列表项，一旦它到达最后一个列表项，突出显示应该被删除

setInterval正在工作，但当我使用clearInterval删除该间隔时，它不工作

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

var$anchors=$（'a.anchor'），计数器=0；
var区间；
间隔=设置间隔（函数（）{
$anchors.removeClass（'highlight'）；
$anchors.eq（计数器+%$anchors.length）.addClass（'highlight'）；
如果（$anchors.length==5）{
间隔时间；
}
}, 4000);

是否要在到达最终列表项时清除间隔

小提琴链接：

更新：抱歉，我的代码错误，已更正代码，仍然是相同的问题

请尝试：

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

尝试：

---

您使用了错误的条件来停止计时器<代码>$anchors。显示的长度始终为5；要检查的是

计数器

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'），
计数器=0；
var区间；
间隔=设置间隔（函数（）{
$anchors.removeClass（'highlight'）；
$anchors.eq（计数器+%$anchors.length）.addClass（'highlight'）；
如果（计数器==5）{
间隔时间；
}
}, 400);
。突出显示{
颜色：红色；
}












您使用了错误的条件来停止计时器<代码>$anchors。显示的长度始终为5；要检查的是
计数器

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'），
计数器=0；
var区间；
间隔=设置间隔（函数（）{
$anchors.removeClass（'highlight'）；
$anchors.eq（计数器+%$anchors.length）.addClass（'highlight'）；
如果（计数器==5）{
间隔时间；
}
}, 400);
。突出显示{
颜色：红色；
}












如果要突出显示最后一个：


var$anchors=$（'a.anchor'），计数器=0；
var区间；
间隔=设置间隔（函数（）{
$anchors.removeClass（'highlight'）；
$anchors.eq（计数器+%$anchors.length）.addClass（'highlight'）；
如果（$anchors.length==计数器）{
间隔时间；
}
}, 1000);
。突出显示{
颜色：红色；
}







如果要突出显示最后一个：


var$anchors=$（'a.anchor'），计数器=0；
var区间；
间隔=设置间隔（函数（）{
$anchors.removeClass（'highlight'）；
$anchors.eq（计数器+%$anchors.length）.addClass（'highlight'）；
如果（$anchors.length==计数器）{
间隔时间；
}
}, 1000);
。突出显示{
颜色：红色；
}







这里有一个不同的更简单的方法：

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

在循环结束时调用此函数。另外，我不确定增量模数是多少？我只是简单地把
计数器+++
放在它自己的位置上，看起来没有必要提取模…模真的吗


一小条

var$anchors=$（'a.anchor'），
计数器=0；
var区间；
setInterval（函数（）{
间隔=$anchors.removeClass（'highlight'）；
$anchors.eq（counter.addClass（'highlight'）；
stopInt（计数器，间隔）；
计数器++；
}, 4000);
函数stopInt（cnt，int）{
如果（cnt>$anchors.length）{
清除间隔（int）；
返回false；
}
}
。突出显示{
颜色：红色；
}







这里有一个不同的更简单的方法：

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

在循环结束时调用此函数。另外，我不确定增量模数是多少？我只是简单地把
计数器+++
放在它自己的位置上，看起来没有必要提取模…模真的吗


一小条

var$anchors=$（'a.anchor'），
计数器=0；
var区间；
setInterval（函数（）{
间隔=$anchors.removeClass（'highlight'）；
$anchors.eq（counter.addClass（'highlight'）；
stopInt（计数器，间隔）；
计数器++；
}, 4000);
函数stopInt（cnt，int）{
如果（cnt>$anchors.length）{
清除间隔（int）；
返回false；
}
}
。突出显示{
颜色：红色；
}







$（'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);

$（'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);

“Jquery setInterval和clearInterval”
setInterval
和
clearInterval
与Jquery无关。下次，请使用堆栈片段（工具栏按钮
）而不是JSFIDLE，所以这里的所有内容都在现场。“对不起，我的代码错了，更正了代码，还是同一个问题”您可能也应该更新fiddle（或者更好的是，将其转换为堆栈片段）。“Jquery setInterval和clearInterval”
setInterval
和
clearInterval
与Jquery无关。下次，请使用堆栈片段（工具栏按钮
）而不是jsFiddle，所以这里的所有内容都是现场的。“对不起，我的代码错了，更正了代码，还是同一个问题”您可能也应该更新fiddle（或者更好的是，将其转换为堆栈片段）。使用
$anchors.length
而不是硬编码的5.使用
$anchors.length
而不是硬编码的5.最后一个锚点仍将高亮显示最后一个锚点仍将高亮显示