CODEWITHSUNDEEP
javascriptjquery
Yahreen
Yahreen

Reputation: 1669

Run setInterval once and then stop

I am currently applying an "active" class to a set of list items. You can see the fiddle here:

http://jsfiddle.net/y9h5q/906/

EDIT: Here's the 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>

...and here's the javascript:

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

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

I'd like for setInterval to only run once, stopping after the very last list item.

I'm not sure whether to use setInterval or setTimeout?

Upvotes: 2

Views: 2270

Answers (2)

Purag
Purag

Reputation: 17061

Here's what I came up with:

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

Obviously not as convenient and short as CrisDeBlonde's, but still works. Also, I chained your jQuery for readability's sake.

Upvotes: 0

CdB
CdB

Reputation: 4908

You mean like this: http://jsfiddle.net/xELsc/ ?

[Edit: added the script]
Change your js like this:

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

Upvotes: 2

Related Questions