Переменные с задержкой применяются в неправильном порядке в цикле setTimeout - PullRequest
Новая
       12

Переменные с задержкой применяются в неправильном порядке в цикле setTimeout

0 голосов
/ 13 февраля 2011

(Новичок здесь) У меня есть цикл setTimeout с переменной значений времени задержки. Он перебирает ul, добавляет класс к элементу списка, по истечении заданного промежутка времени удаляет этот класс и переходит на следующий элемент списка; повторять процесс до последнего (li)

Проблема в том, что значения задержки применяются неправильно. Значение последней временной задержки применяется ко второму последнему элементу списка вместо последнего.

http://jsfiddle.net/bizarroZ/YyDjW/

<style type="text/css" media="screen">
li {display:none;} .go {color:green;display:block}
</style>

<ul>
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
<li>Fourth Slide</li>
<li>Fifth Slide</li>
<li>Sixth Slide</li>
</ul>

<a href="#" class="go-button">GO!</a>


    <script type="text/javascript" charset="utf-8">

$(".go-button").click(function() {

     $("li:nth-of-type(1)").addClass("go"); 

    var index = 0;
    var length = $("ul").children().length;
    var delays = [
            1000,
            1500,
            2000,
            2500,
            3000,
            15000

    ];

    function delayNext()
    {
        setTimeout(function() {
        $("ul li:eq(" + index +  ")").addClass("go").siblings().removeClass("go");
            index++;

            if (index == length)
                index = 0;

            delayNext();
        }, delays[index]);
    }

    delayNext();
});
</script>

1 Ответ

0 голосов
/ 13 февраля 2011

что-то вроде это ... не очень хорошее решение, но оно делает то, что вы намереваетесь сделать ...

проблема в вашем коде
при событии щелчка вы добавляете класс go к первому дочернему элементу, который первый слайд , а на setTimeout вы снова назначаете класс go на первый слайд :eqселектор следует индексации на основе нуля , поэтому к моменту достижения 5-го слайда ваш счетчик будет установлен на 15000 миллисекунд, то есть время после повторного вызова delayNext()

...