单击链接时停止功能。 JQuery的

Question

我有一个名为rotatePics()的幻灯片，从页面加载开始。 我也有一些li ，当点击时，将获得该li的rel值。 该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);
    });
};

我也知道模数部分改变整数，这最初只是一个滚动的幻灯片，没有选择新图像的选项。

Answer 1

您只需将setTimeout的返回值赋给变量，然后调用clearTimeout 。

var timerID;

// ...

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

// ...

clearTimeout(timerID);

Answer 2

清除超时如下：

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);
});