jQuery 无限值随延迟变化

Question

是否可以从 list 项中更改 div 中的值。

示例：

我有一个包含项目的列表：

<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

关于OP脚本，贴在问题评论中：

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被设置为0 (x = 0;) 并重新开始计数。因此浏览器崩溃了。

This 是使用您的方案的固定脚本。但出于这个目的，没有理由同时使用 setTimeout 和 for 循环。请改用 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);
    }
 });

jQuery 无限值随延迟变化

jQuery infinite value change with delay

jquery

infinite-loop