Question

我有一个滑块可以很好地在不同的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>

当用户点击任何一个标签时，滑块会跳转到该标签，但计时器会持续计数并在不到5秒的时间内自动继续计数。

当用户点击任何标签时，我怎么能让计时器停止？

Answer 1

使用setTimeout时，将其设置为变量，以便以后可以使用clearTimeout。例如，

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

祝你好运：）

Answer 2

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

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

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

2 个答案: