javascript - 当用户单击任何数字时停止计时器/自动流程

Question

我有一个 slider ，可以使用以下代码在不同的 div 之间很好地旋转:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function (){


    function showSlide(integer) {
        $('#myslide .cover').css({left:-960*(integer-1)}).hide().fadeIn(); 
        $('#button a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });

        $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').css({left:-960*(parseInt(integer)-1)}).hide().fadeIn(); 
        $('#button a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}

                });
            });
        setTimeout(function() {showSlide((integer % 5) + 1);}, 5000);


    }

    setTimeout(function() { showSlide(2); }, 5000);


});
</script>

当用户单击任何选项卡时， slider 会跳转到该选项卡，但计时器会继续计时，并在不到 5 秒的时间内自动继续自动移动到原来的位置。

如何让计时器在用户单击任何选项卡时停止？

Answer 1

存储对超时的引用，并在用户单击时清除它。

var timeout;
function showSlide(integer) {
    $('#myslide .cover').css({left:-960*(integer-1)}).hide().fadeIn(); 
    $('#button a').each(function(){
    $(this).removeClass('active');
        if($(this).hasClass('button'+integer)){
            $(this).addClass('active')}
    });

    $('#button a').click(function(){
        clearTimeout( timeout );
        var integer = $(this).attr('rel');
        $('#myslide .cover').css({left:-960*(parseInt(integer)-1)}).hide().fadeIn(); 
        $('#button a').each(function(){
            $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')
            }

        });
    });
    timeout = setTimeout(function() {showSlide((integer % 5) + 1);}, 5000);
}
timeout = setTimeout(function() { showSlide(2); }, 5000);