Javascript 运行setInterval一次，然后停止

我目前正在对一组列表项应用一个“活动”类。你可以在这里看到小提琴：

编辑：以下是HTML：

<div id="slider">
  <ul>
    <li class='active'> a </li>
    <li> b &lt; </li>
    <li> c &lt; </li>    
    <li> d &lt; </li>
    <li> e &lt; </li>
  </ul>
</div>

我希望setInterval只运行一次，在最后一个列表项之后停止

我不确定是使用setInterval还是setTimeout？

你的意思是：

[编辑：添加脚本]
如下更改您的js：

var toggleSlide = setInterval( function() {
      $("#slider li.active").removeClass().next().last().addClass("active");
},300);

这就是我想到的：

var toggleSlide = setInterval(function() {
    if ($("#slider li.wasActive").length == $("#slider li").length) {
        clearInterval(toggleSlide);
    } else {
        $("#slider li.active")
            .removeClass("active")
            .addClass("wasActive")
            .next()
            .addClass("active");
    }
    }, 300);

$("li").click(function() {
    clearInterval(toggleSlide);
});

---

显然不像克里斯代布朗德的方便和简短，但仍然有效。此外，为了可读性，我将您的jQuery链接起来。

@cristeblonde，为了子孙后代，您可能会将fiddle代码复制到您的答案中。事实上，在尝试将其合并到我的代码中时，我很难让它正常工作。这里有一个新的提琴：@Yahreen尝试将.cycle类分配给

而不是@Yahreen。还可以这样修改css：

.cycle a{color:red；}

这是我在上一个提琴中使用的。

var toggleSlide = setInterval(function() {
    if ($("#slider li.wasActive").length == $("#slider li").length) {
        clearInterval(toggleSlide);
    } else {
        $("#slider li.active")
            .removeClass("active")
            .addClass("wasActive")
            .next()
            .addClass("active");
    }
    }, 300);

$("li").click(function() {
    clearInterval(toggleSlide);
});