Как прервать / приостановить бесконечно зацикливание Jquery-функции для слайдера контента?

Question

У меня есть страница, где я зацикливаюсь на наборе элементов списка, используя jquery fadeout () и fadein ().

Все работает нормально, за исключением того, что я бы хотел сделать так:

• пользователь может щелкнуть по отдельному элементу, который представляет li в повороте.
• Когда они щелкают по элементу, текущий цикл анимации останавливается,
• загружается соответствующий контент li
• анимация возобновляется.

Я считаю, что мне нужно сделать это с очередями jquery, но мне было интересно, есть ли более простое решение, которое я пропускаю.

Вот мой код:

$(document).ready(function () {

var j = 0;
var fadetime = 700;
var delay = 3000; //millisecond delay between cycles
function cycleThru() {
    var jmax = $("ul#rotator li").length - 1;
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "#660000");

    $("ul#rotator li:eq(" + j + ")").fadeIn(fadetime).delay(delay);

    $("ul#rotator li:eq(" + j + ")").fadeOut(fadetime, function () {
        $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");            
        (j == jmax) ? j = 0 : j++;            
        cycleThru();
    });

};

//Setup the clickers on the pager boxes. 
$("ul#rotator_pager li").click(function () {

    //Switch to this list element and resume animation cycle.

});


cycleThru();

});

Соответствующий HTML -

<ul id="rotator">
<li id="first">
    <div><!--HTML Goes HERE--></div>
</li>
<li>
    <div><!--HTML Goes HERE--></div>
</li>
<li>
    <div><!--HTML Goes HERE--></div>
</li>
</ul>
<ul id="rotator_pager">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

Answer 1

Заставьте ваш рекурсивный вызов функции зависеть от глобальной логической переменной:

if (!window.end_loop) {
    cycleThru();
}
...
$('ul#rotater_pager li').click(function() {
    window.end_loop = true;
}

Answer 2

Итак, я отошел от него на несколько минут и понял это. Вам нужно использовать очередь Jquery, но это было не так сложно, как я думал. Вот решение для других:

$(document).ready(function () {

var j = 0;
var fadetime = 700;
var delay = 3000; //millisecond delay between cycles
function cycleThru() {
    var jmax = $("ul#rotator li").length - 1;
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "#660000");

    $("ul#rotator li:eq(" + j + ")")
        .fadeIn(fadetime)
        .delay(delay)
        .fadeOut(fadetime, function () {
            $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");
            (j == jmax) ? j = 0 : j++;
            cycleThru();
        });

};

//Setup the clickers on the pager boxes. 
var items = $("ul#rotator_pager li").click(function () {
    $("ul#rotator li:eq(" + j + ")").clearQueue();
    $("ul#rotator li:eq(" + j + ")").stop();
    $("ul#rotator li:eq(" + j + ")").hide();
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");
    j = items.index(this);
    cycleThru();
    //Switch to this list element and resume animation cycle.

});


cycleThru();

});

Обычно, когда вы нажимаете на элемент списка, он:

• очищает все анимации (dequeue и .stop),
• скрывает отображаемый в данный момент элемент списка содержимого,
• устанавливает селектор элемента списка контента на соответствующий выбранный элемент списка
• наконец, снова запускает анимацию.

Answer 3

Вы можете установить анимацию как переменную, чтобы очистить ее при нажатии.

$(document).ready(function () {

var j = 0;
var fadetime = 700;
var delay = 3000; //millisecond delay between cycles
var cycle;
function cycleThru() {
    var jmax = $("ul#rotator li").length - 1;
    $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "#660000");

    $("ul#rotator li:eq(" + j + ")").fadeIn(fadetime).delay(delay);

    $("ul#rotator li:eq(" + j + ")").fadeOut(fadetime, function () {
        $("ul#rotator_pager li:eq(" + j + ")").css("background-color", "");
        if (j != userj)
        { j = userj }
        else {
            (j == jmax) ? j = 0 : j++;
            userj = j;
        }
        cycle = setTimeout(function(){
            cycleThru();
          }, 10);
    });

};

//Setup the clickers on the pager boxes. 
$("ul#rotator_pager li").click(function () {

    clearTimeout(cycle);
    //Switch to this list element and resume animation cycle.

});


cycle = setTimeout(function(){
   cycleThru();
}, 10);
});