Creating in an infinite loop using setTimeout

Question

I'm trying to figure out how I can restart my loop after reaches the last item of the list. Basically it passes the class active to the next sibling every 3s. How can I make it pass to the first item on the list once it reaches the last item.

I was thinking maybe if I could have use if/else instead of for loop in my program

 $(document).ready(function() { function durationSlider() { var listItems = $('.loop ul li').length; for(count=0; count <= listItems - 1; count++ ) { (function(count) { setTimeout(function() { $('.loop ul li.active').removeClass('active'); $('.loop ul li:eq(' + count + ')').addClass('active'); console.log(count); }, 3000 * count); }(count)); } } durationSlider(); }) 

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .loop ul li { color : green; -webkit-transition: color 1s linear; } .loop ul li.active { -webkit-transition: color 1s linear; color : red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="loop"> <ul> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> 

Answer 1

I would use setInterval instead of a for loop with setTimeout . Inside the interval we can add an if condition to reset the count when it reaches the end of your list.

 $(document).ready(function() { function durationSlider() { var listItems = $('.loop ul li').length; var count = 0; setInterval(function() { $('.loop ul li.active').removeClass('active'); $('.loop ul li:eq(' + count + ')').addClass('active'); console.log(count); count += 1; if (count >= listItems) { count = 0; } }, 3000); } durationSlider(); }) 

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .loop ul li { color : green; -webkit-transition: color 1s linear; } .loop ul li.active { -webkit-transition: color 1s linear; color : red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="loop"> <ul> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> 

Answer 2

Using pure JavaScript code

function start() {

    setTimeout(function() {
        console.log('Hello My Infinite Loop Execution');

      // Again
      start();

      // Every 3 sec
    }, 3000);
}

// Begins
start();