Javascript -停止Slideshow

Question

我有一个幻灯片，它每秒钟显示一个图像。

但我想要一个“停止按钮”，以便to.....stop旋转木马XD，我正在做它，但我分开了这两个功能(一个用于旋转木马，一个用于按钮)。

这里是

<div id="gallerie2">
    <img id="first2" src="http://lorempicsum.com/futurama/150/150/2"><br/>
    <div id="vignette">
        <img class="second2" src="http://lorempicsum.com/futurama/150/150/6">
        <img class="second2" src="http://lorempicsum.com/futurama/150/150/4">
        <img class="second2" src="http://lorempicsum.com/futurama/150/150/3">
        <img class="second2" src="http://lorempicsum.com/simpsons/150/150/2">
        <img class="second2" src="http://lorempicsum.com/simpsons/150/150/1">
        <img class="second2" src="http://lorempicsum.com/simpsons/150/150/4">
    </div>
</div>

<div id="controlSlideShow">
    <button id="start">Start</button>
    <button id="stop">Stop</button>
</div>     

这里是幻灯片的Javascript (它工作得很好，这不是问题)

var index = 0;
    setInterval(function nextSlide(){
        var slides = document.getElementsByClassName("second2");
        var firstSlide = document.getElementById("first2");
        firstSlide.src = slides[index].src;
        index++;
        if(index == slides.length){
            index = 0;   
        }
    }, 1000);

，下面是按钮的Javascript

    document.getElementById("controlSlideShow").addEventListener('click', controlSlideShow);
    function controlSlideShow(e){
        switch(e.target.id){
            case 'stop':
                console.log("clickStop");
                clearTimeout(nextSlide);
            break;
            case 'start': console.log("start");
            break;   
        }
    }

我正在处理这些按钮，但为了阻止幻灯片显示，我不能将nextSlide()函数称为clearTimeout()。

谢谢你抽出时间来解决我的问题。你能在解决后解释我吗？我真的想知道我的错误在哪里，而不仅仅是采取解决办法。=)

下面是jsFiddle：https://jsfiddle.net/k3g19dbo/

Answer 1

需要传递给clearInterval (而不是clearTimeout)的参数不是传递给setInterval的函数的名称，而是setInterval返回的值。所以要这样做：

var timerId = setInterval(function nextSlide(){
     // ... etc
}, 1000);
// ...
clearInterval(timerId);
// ...

注意：clearTimeout在大多数浏览器中也能工作，但在使用setInterval时调用clearInterval和使用setTimeout时调用clearTimeout更有意义。