Изменение бесконечного значения jQuery с задержкой

Question

Можно ли изменить значение в div от list элементов.

Пример:

У меня есть список с элементами:

<ul id="list"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

И Я пустой div где мне нужно поставить значения

<div id="output"></div> 

Как я могу петли через список (li) и положите значение в #output с задержкой 5 секунд. Как только цикл закончен, нужно начинать с начала и бесконечно. Кроме того, цикл не должен крушить браузер.

Также может быть много списков и выходных div.

Answer 1

Что касается сценария ОП, оставленного в вопросе комментарии:

function doTimeOut(x) { 
    setTimeout(function() { 
     $('#output').html(x) 
    }, 600); 
} 
$(function() { 
    var items = $('.list li') for(var x = 0; x <= items.length; ++x) { 
     if(x == items.length) { 
      // you start the loop over again here: 
      x = 0; 
     } else { 
      // you're updating the #output div x times in basically same time: 
      doTimeOut(x); 
     } 
    } 
}); 

выше не работает, просто потому, что, когда цикл for достигает высоким x, то x устанавливается до (x = 0;) и начинает отсчет снова. Поэтому браузер рушится.

This фиксированный сценарий, использующий ваш сценарий. Но для этих целей нет оснований для использования setTimeout и для петля вместе. Используйте вместо этого setinterval. Что-то вроде:

$(function() { 

    function getVlaues() { 
     $('#output').html($('#list li').length); 
    } 
    setInterval(getVlaues, 5000); 

}); 

JSFiddle

Answer 2

Я сделал это так:

HTML:

<div class="row"> 
    <div class="cell"> 
     <ul class="list"> 
      <li>Item</li> 
      <li>Item 2</li> 
     </ul> 
     <div class="output"></div> 
    </div> 
</div> 

JS:

$('.row .cell').each(function(){ 
    var wrapper = $(this); 
    var maxValue = wrapper.find('.list li').length 
    var currentValue = 1; 

    var item = wrapper.find('.list li')[0] 

    if(maxValue >= 2) { 
     wrapper.find('.output').html(item.innerText).delay(5700).fadeOut(300); 
     function getValues() { 
      if(currentValue == maxValue) { 
       currentValue = 0; 
      } 
      var item = wrapper.find('.list li')[currentValue] 
      wrapper.find('.output').html(item.innerText).fadeIn(300).delay(5400).fadeOut(300); 
      currentValue++; 
     } 
     setInterval(getValues, 6000); 
    } else { 
     wrapper.find('.output').html(item.innerText); 
    } 
});