使用setTimeout在無限循環中創建

Question

我想弄清楚如何在達到列表的最後一項後重新啓動循環。基本上它每3秒就通過active到下一個兄弟姐妹。一旦到達最後一個項目，我如何才能將它傳遞給列表中的第一個項目。

我想也許如果我能有使用if/else代替for環在我的計劃

$(document).ready(function() { 
 

 

 

 
\t function durationSlider() { 
 
\t  var listItems = $('.loop ul li').length; 
 

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

 
\t durationSlider(); 
 
    
 

 
}) 
 
\t

/* 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 { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article, aside, details, figcaption, figure, 
 
footer, header, hgroup, menu, nav, section { 
 
\t display: block; 
 
} 
 
body { 
 
\t line-height: 1; 
 
} 
 
ol, ul { 
 
\t list-style: none; 
 
} 
 
blockquote, q { 
 
\t quotes: none; 
 
} 
 
blockquote:before, blockquote:after, 
 
q:before, q:after { 
 
\t content: ''; 
 
\t content: none; 
 
} 
 
table { 
 
\t border-collapse: collapse; 
 
\t border-spacing: 0; 
 
} 
 

 

 
.loop ul li { 
 
\t color : green; 
 
\t -webkit-transition: color 1s linear; 
 

 
} 
 

 
.loop ul li.active { 
 
\t -webkit-transition: color 1s linear; \t 
 
    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

我會用setInterval，而不是一個for循環與setTimeout。在間隔內，我們可以添加一個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'); \t 
 
     console.log(count); 
 

 
     count += 1; 
 
     if (count >= listItems) { 
 
      count = 0; 
 
     } 
 
    }, 3000); 
 

 
} 
 

 
durationSlider(); 
 

 
}) 
 
\t

/* 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 { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article, aside, details, figcaption, figure, 
 
footer, header, hgroup, menu, nav, section { 
 
\t display: block; 
 
} 
 
body { 
 
\t line-height: 1; 
 
} 
 
ol, ul { 
 
\t list-style: none; 
 
} 
 
blockquote, q { 
 
\t quotes: none; 
 
} 
 
blockquote:before, blockquote:after, 
 
q:before, q:after { 
 
\t content: ''; 
 
\t content: none; 
 
} 
 
table { 
 
\t border-collapse: collapse; 
 
\t border-spacing: 0; 
 
} 
 

 

 
.loop ul li { 
 
\t color : green; 
 
\t -webkit-transition: color 1s linear; 
 

 
} 
 

 
.loop ul li.active { 
 
\t -webkit-transition: color 1s linear; \t 
 
    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

使用純JavaScript代碼

function start() { 

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

     // Again 
     start(); 

     // Every 3 sec 
    }, 3000); 
} 

// Begins 
start();