使用setTimeout在无限循环中创建

我想弄清楚如何在到达列表的最后一项后重新启动循环。 基本上它每3秒将类active传递给下一个兄弟。 一旦到达最后一个项目，如何将其传递到列表中的第一个项目。

我想也许我可以在我的程序中使用if/else而不是for循环

 $(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; } 

  
 
 
1
 
2
 
3
 
4
 
  

Answer 1

我会使用setInterval而不是使用setTimeout的for循环。 在时间间隔内，我们可以添加if条件，以便在到达列表末尾时重置计数。

 $(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; } 

  
 
 
1
 
2
 
3
 
4
 
  

Answer 2

使用纯JavaScript代码

 function start() { setTimeout(function() { console.log('Hello My Infinite Loop Execution'); // Again start(); // Every 3 sec }, 3000); } // Begins start();