Loop setInterval function

Question

1.18M viewsSeptember 10, 2022javascript jquery loops setinterval

2

rbattle September 7, 2022 0 Comments

I’m not sure why the interval isn’t looping. I’ve followed tutorials exactly but not luck. Suggestions?

$(document).ready(function(){
  setInterval(function() {
    $('.current').removeClass('current').next().addClass('current');  
    }, 2000);
});

Updated: http://jsfiddle.net/pa7aU/3/

5 Answers

score 0 · Answer 1 · 2022-09-09T05:41:41+00:00

When you reach the last element, you need to go back to the beginning, not use .next().

$(document).ready(function () {
    setInterval(function () {
        var next = $('.current').removeClass('current').next();
        if (next.length == 0) {
            next = $("li:first");
        }
        next.addClass('current');
    }, 2000);
});

FIDDLE

score 0 · Answer 2 · 2022-09-09T04:35:55+00:00

Just to add something new to the mix:

$(document).ready(function () {
    setInterval(function () {
        $('li').eq(($('.current').removeClass('current').index() + 1) % $('li').size()).addClass('current');
    }, 200);
});

score 0 · Answer 3 · 2022-09-09T02:21:28+00:00

When you are at the last li, next() doesnt go to the first.

An easy fix is to add that after :

if($('.current').length <= 0) $('li:first').addClass('current');

Fiddle : http://jsfiddle.net/pa7aU/5/

score 2 · Answer 4 · 2022-09-08T08:32:19+00:00

One possible ~~ugly~~ solution:

setInterval(function() {
    var $current = $(".current").removeClass("current"),
        $next = $current.next();

    if ($next.length)
        $next.addClass("current");
    else
        $current.siblings(":first").addClass("current");
}, 2000);

DEMO: http://jsfiddle.net/pa7aU/4/

score 2 · Answer 5 · 2022-09-08T06:11:25+00:00

$(document).ready(function () {
    var $li = $('ul li'), i = 0, l = $li.length;
    setInterval(function() {
        $li.removeClass('current').eq(i % l).addClass('current');
        i++;
    }, 2000);
});

http://jsfiddle.net/chg4J/