Остановите функцию при нажатии на ссылку. JQuery - PullRequest
Новая
       24

Остановите функцию при нажатии на ссылку. JQuery

0 голосов
/ 12 декабря 2011

У меня есть слайд-шоу с именем rotatePics(), которое начинается при загрузке страницы.У меня также есть число li, которые при нажатии получат значение rel этого li.rel из li совпадают с id из предварительно загруженных изображений слайд-шоу.Поэтому, когда по одному щелкают, я хочу остановить текущую функцию слайд-шоу с именем rotatePics и перезапустить ее, но проанализировав новое целое число.

В настоящее время происходит то, что я могу запустить новую функцию слайд-шоу, но не могузамените функцию слайд-шоу, которая запускается при загрузке страницы.

Мне нужно остановить rotatePics() и перезапустить ее с переменной number, когда работает только последняя функция. 

$('a.main-img').click(function (e)
{
    e.preventDefault();

    var clickedLi = $(this).closest('li').attr('rel');

    var number = parseInt(clickedLi);

    rotatePics(number);

});

Этокод для rotatePics() функции 

    function rotatePics(currentPhoto){

    var numberOfPhotos = $('#banner-holder img').length;

    currentPhoto = currentPhoto % numberOfPhotos;

    $('#banner-holder img').eq(currentPhoto).fadeOut(function (){
        $('#banner-holder img').each(function (i)
        {
            $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos);
        });

        $(this).show();

        setTimeout(function ()
        {
            rotatePics(++currentPhoto); 
        }, 1000);
    });
};

Мне также известно, что модуль модуля изменяет целое число. Первоначально это было просто скользящее слайд-шоу и без возможности выбора новых изображений.

Ответы [ 2 ]

1 голос
/ 12 декабря 2011

Сбросьте время ожидания следующим образом: 

var rotatePicsTimer;
function rotatePics(currentPhoto){ 

    var numberOfPhotos = $('#banner-holder img').length; 

    currentPhoto = currentPhoto % numberOfPhotos; 

    $('#banner-holder img').eq(currentPhoto).fadeOut(function (){ 
        $('#banner-holder img').each(function (i) 
        { 
            $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos); 
        }); 

        $(this).show(); 

        rotatePicsTimer = setTimeout(function () 
        { 
            rotatePics(++currentPhoto);  
        }, 1000); 
    }); 
};

$('a.main-img').click(function (e)   
{   
    e.preventDefault();   

    var clickedLi = $(this).closest('li').attr('rel');   

    var number = parseInt(clickedLi);   

    clearTimeout(rotatePicsTimer);
    rotatePics(number);
});
1 голос
/ 12 декабря 2011

Вам просто нужно присвоить возвращаемое значение setTimeout переменной, а затем вызвать clearTimeout. 

var timerID;

// ...

timerID = setTimeout(function ()
{
    rotatePics(++currentPhoto); 
}, 1000);

// ...

clearTimeout(timerID);
...