Javascript 如何使用点击式触发器清除setInterval函数中的计时器？

我写了一段代码：

 var timer = 0;   

$('.tour-slider').on('click', 'li a', function(e){
    e.preventDefault();
    $(this).closest('.slider').hide();
    var sliderHref = $(this).attr('href');
    $(sliderHref).fadeIn();
    if(sliderHref == '#slider-1'){
        anim1.pause();
        anim2.pause();
        anim3.pause();
        anim1.start();
    }else if(sliderHref == '#slider-2'){
        anim1.pause();
        anim2.pause();
        anim3.pause();
        anim2.start();  
    }else if(sliderHref == '#slider-3'){
        anim1.pause();
        anim2.pause();
        anim3.pause();
        anim3.start();
    }
});



function slideshow(){
$('#slider-1').siblings().hide();
anim1.start();
timer = setInterval(function(){
    $('.slider:visible .active').next('li').find('a').trigger('click');

    $('.helper').first().removeClass('helper');
    if (!$('#slider-3').hasClass('helper')) {
        $('#slider-1, #slider-2, #slider-3').addClass('helper');
        $('#slider-1 .active').find('a').trigger('click');
        $('#slider-3').hide();
    }
}, 10000);

}

            <div id="slider-1" class="slider helper">

                <div id="animation-1">

                </div> <!-- end animation-1 -->

            <div class="tour-slider-content">

                <ul>
                    <li class="active"><a href="#slider-1"></a></li>
                    <li><a href="#slider-2"></a></li>
                    <li><a href="#slider-3"></a></li>
                </ul>

            </div> <!-- end slider content class -->

            </div> <!-- end slider 1 -->
            <div id="slider-2" class="slider helper">
                <div id="animation-2">   

                </div> <!-- end animation-2 -->

                <div class="tour-slider-content">

                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li class="active"><a href="#slider-2"></a></li>
                        <li><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 2 -->

            <div id="slider-3" class="slider helper">

                <div id="animation-3">

                </div> <!-- end animation 3 -->

                <div class="tour-slider-content">


                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li><a href="#slider-2"></a></li>
                        <li class="active"><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 3 -->

        </div> <!-- end yout slider -->

如您所见，这是使用setInterval创建的无限循环中的基本幻灯片放映

            <div id="slider-1" class="slider helper">

                <div id="animation-1">

                </div> <!-- end animation-1 -->

            <div class="tour-slider-content">

                <ul>
                    <li class="active"><a href="#slider-1"></a></li>
                    <li><a href="#slider-2"></a></li>
                    <li><a href="#slider-3"></a></li>
                </ul>

            </div> <!-- end slider content class -->

            </div> <!-- end slider 1 -->
            <div id="slider-2" class="slider helper">
                <div id="animation-2">   

                </div> <!-- end animation-2 -->

                <div class="tour-slider-content">

                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li class="active"><a href="#slider-2"></a></li>
                        <li><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 2 -->

            <div id="slider-3" class="slider helper">

                <div id="animation-3">

                </div> <!-- end animation 3 -->

                <div class="tour-slider-content">


                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li><a href="#slider-2"></a></li>
                        <li class="active"><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 3 -->

        </div> <!-- end yout slider -->

但现在，我必须添加一些功能-如果用户单击“a”元素，那么setInterval计时器应该重新启动

            <div id="slider-1" class="slider helper">

                <div id="animation-1">

                </div> <!-- end animation-1 -->

            <div class="tour-slider-content">

                <ul>
                    <li class="active"><a href="#slider-1"></a></li>
                    <li><a href="#slider-2"></a></li>
                    <li><a href="#slider-3"></a></li>
                </ul>

            </div> <!-- end slider content class -->

            </div> <!-- end slider 1 -->
            <div id="slider-2" class="slider helper">
                <div id="animation-2">   

                </div> <!-- end animation-2 -->

                <div class="tour-slider-content">

                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li class="active"><a href="#slider-2"></a></li>
                        <li><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 2 -->

            <div id="slider-3" class="slider helper">

                <div id="animation-3">

                </div> <!-- end animation 3 -->

                <div class="tour-slider-content">


                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li><a href="#slider-2"></a></li>
                        <li class="active"><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 3 -->

        </div> <!-- end yout slider -->

现在，幻灯片每10秒改变一次（#slider-1、#slider-2、#slider-3）。但当用户在4秒后点击另一个“a”时，滑块将改变，6秒后再次自动改变

            <div id="slider-1" class="slider helper">

                <div id="animation-1">

                </div> <!-- end animation-1 -->

            <div class="tour-slider-content">

                <ul>
                    <li class="active"><a href="#slider-1"></a></li>
                    <li><a href="#slider-2"></a></li>
                    <li><a href="#slider-3"></a></li>
                </ul>

            </div> <!-- end slider content class -->

            </div> <!-- end slider 1 -->
            <div id="slider-2" class="slider helper">
                <div id="animation-2">   

                </div> <!-- end animation-2 -->

                <div class="tour-slider-content">

                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li class="active"><a href="#slider-2"></a></li>
                        <li><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 2 -->

            <div id="slider-3" class="slider helper">

                <div id="animation-3">

                </div> <!-- end animation 3 -->

                <div class="tour-slider-content">


                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li><a href="#slider-2"></a></li>
                        <li class="active"><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 3 -->

        </div> <!-- end yout slider -->

现在： （#slider-1显示>用户在4秒后单击“a”>#slider-2显示>在6秒后#slider-3显示）

            <div id="slider-1" class="slider helper">

                <div id="animation-1">

                </div> <!-- end animation-1 -->

            <div class="tour-slider-content">

                <ul>
                    <li class="active"><a href="#slider-1"></a></li>
                    <li><a href="#slider-2"></a></li>
                    <li><a href="#slider-3"></a></li>
                </ul>

            </div> <!-- end slider content class -->

            </div> <!-- end slider 1 -->
            <div id="slider-2" class="slider helper">
                <div id="animation-2">   

                </div> <!-- end animation-2 -->

                <div class="tour-slider-content">

                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li class="active"><a href="#slider-2"></a></li>
                        <li><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 2 -->

            <div id="slider-3" class="slider helper">

                <div id="animation-3">

                </div> <!-- end animation 3 -->

                <div class="tour-slider-content">


                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li><a href="#slider-2"></a></li>
                        <li class="active"><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 3 -->

        </div> <!-- end yout slider -->

想要： （#slider-1显示>用户在4秒后单击“a”>#slider-2显示>10秒后#slider-3显示）

            <div id="slider-1" class="slider helper">

                <div id="animation-1">

                </div> <!-- end animation-1 -->

            <div class="tour-slider-content">

                <ul>
                    <li class="active"><a href="#slider-1"></a></li>
                    <li><a href="#slider-2"></a></li>
                    <li><a href="#slider-3"></a></li>
                </ul>

            </div> <!-- end slider content class -->

            </div> <!-- end slider 1 -->
            <div id="slider-2" class="slider helper">
                <div id="animation-2">   

                </div> <!-- end animation-2 -->

                <div class="tour-slider-content">

                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li class="active"><a href="#slider-2"></a></li>
                        <li><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 2 -->

            <div id="slider-3" class="slider helper">

                <div id="animation-3">

                </div> <!-- end animation 3 -->

                <div class="tour-slider-content">


                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li><a href="#slider-2"></a></li>
                        <li class="active"><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 3 -->

        </div> <!-- end yout slider -->

我知道，我必须使用clearInterval，是吗？但我不知道如何在我的情况下使用它

            <div id="slider-1" class="slider helper">

                <div id="animation-1">

                </div> <!-- end animation-1 -->

            <div class="tour-slider-content">

                <ul>
                    <li class="active"><a href="#slider-1"></a></li>
                    <li><a href="#slider-2"></a></li>
                    <li><a href="#slider-3"></a></li>
                </ul>

            </div> <!-- end slider content class -->

            </div> <!-- end slider 1 -->
            <div id="slider-2" class="slider helper">
                <div id="animation-2">   

                </div> <!-- end animation-2 -->

                <div class="tour-slider-content">

                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li class="active"><a href="#slider-2"></a></li>
                        <li><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 2 -->

            <div id="slider-3" class="slider helper">

                <div id="animation-3">

                </div> <!-- end animation 3 -->

                <div class="tour-slider-content">


                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li><a href="#slider-2"></a></li>
                        <li class="active"><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 3 -->

        </div> <!-- end yout slider -->

HTML标记：

            <div id="slider-1" class="slider helper">

                <div id="animation-1">

                </div> <!-- end animation-1 -->

            <div class="tour-slider-content">

                <ul>
                    <li class="active"><a href="#slider-1"></a></li>
                    <li><a href="#slider-2"></a></li>
                    <li><a href="#slider-3"></a></li>
                </ul>

            </div> <!-- end slider content class -->

            </div> <!-- end slider 1 -->
            <div id="slider-2" class="slider helper">
                <div id="animation-2">   

                </div> <!-- end animation-2 -->

                <div class="tour-slider-content">

                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li class="active"><a href="#slider-2"></a></li>
                        <li><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 2 -->

            <div id="slider-3" class="slider helper">

                <div id="animation-3">

                </div> <!-- end animation 3 -->

                <div class="tour-slider-content">


                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li><a href="#slider-2"></a></li>
                        <li class="active"><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 3 -->

        </div> <!-- end yout slider -->

提前谢谢你的帮助

            <div id="slider-1" class="slider helper">

                <div id="animation-1">

                </div> <!-- end animation-1 -->

            <div class="tour-slider-content">

                <ul>
                    <li class="active"><a href="#slider-1"></a></li>
                    <li><a href="#slider-2"></a></li>
                    <li><a href="#slider-3"></a></li>
                </ul>

            </div> <!-- end slider content class -->

            </div> <!-- end slider 1 -->
            <div id="slider-2" class="slider helper">
                <div id="animation-2">   

                </div> <!-- end animation-2 -->

                <div class="tour-slider-content">

                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li class="active"><a href="#slider-2"></a></li>
                        <li><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 2 -->

            <div id="slider-3" class="slider helper">

                <div id="animation-3">

                </div> <!-- end animation 3 -->

                <div class="tour-slider-content">


                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li><a href="#slider-2"></a></li>
                        <li class="active"><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 3 -->

        </div> <!-- end yout slider -->

---

干杯

将函数移动到变量中（给它一个名称），每次需要时删除并调用setInterval：

            <div id="slider-1" class="slider helper">

                <div id="animation-1">

                </div> <!-- end animation-1 -->

            <div class="tour-slider-content">

                <ul>
                    <li class="active"><a href="#slider-1"></a></li>
                    <li><a href="#slider-2"></a></li>
                    <li><a href="#slider-3"></a></li>
                </ul>

            </div> <!-- end slider content class -->

            </div> <!-- end slider 1 -->
            <div id="slider-2" class="slider helper">
                <div id="animation-2">   

                </div> <!-- end animation-2 -->

                <div class="tour-slider-content">

                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li class="active"><a href="#slider-2"></a></li>
                        <li><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 2 -->

            <div id="slider-3" class="slider helper">

                <div id="animation-3">

                </div> <!-- end animation 3 -->

                <div class="tour-slider-content">


                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li><a href="#slider-2"></a></li>
                        <li class="active"><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 3 -->

        </div> <!-- end yout slider -->

timer = setInterval(do_slide, 10000);

...

function do_slide(){
    $('.slider:visible .active').next('li').find('a').trigger('click');
    $('.helper').first().removeClass('helper');
    if (!$('#slider-3').hasClass('helper')) {
        $('#slider-1, #slider-2, #slider-3').addClass('helper');
        $('#slider-1 .active').find('a').trigger('click');
        $('#slider-3').hide();
    }
}

然后只需在单击事件时调用以下行：

            <div id="slider-1" class="slider helper">

                <div id="animation-1">

                </div> <!-- end animation-1 -->

            <div class="tour-slider-content">

                <ul>
                    <li class="active"><a href="#slider-1"></a></li>
                    <li><a href="#slider-2"></a></li>
                    <li><a href="#slider-3"></a></li>
                </ul>

            </div> <!-- end slider content class -->

            </div> <!-- end slider 1 -->
            <div id="slider-2" class="slider helper">
                <div id="animation-2">   

                </div> <!-- end animation-2 -->

                <div class="tour-slider-content">

                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li class="active"><a href="#slider-2"></a></li>
                        <li><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 2 -->

            <div id="slider-3" class="slider helper">

                <div id="animation-3">

                </div> <!-- end animation 3 -->

                <div class="tour-slider-content">


                    <ul>
                        <li><a href="#slider-1"></a></li>
                        <li><a href="#slider-2"></a></li>
                        <li class="active"><a href="#slider-3"></a></li>
                    </ul>

                </div> <!-- end slider content class -->

            </div> <!-- end slider 3 -->

        </div> <!-- end yout slider -->

if (timer) clearInterval(timer);
timer = setInterval(do_slide, 10000);

---

clearInterval（计时器）

您尝试过这样使用clearInterval吗

clearInterval（timer）

yes，我曾尝试将clearInterval（timer）粘贴到click事件中每个“if”语句的底部，但我认为范围可能有问题。。我是否应该尝试将“单击”事件函数粘贴到“slideshow（）”函数中？