Javascriptを - 停止スライドショータイムアウト

Question

私は1枚の画像にそれぞれ二

を表示するスライドショーを持っている。しかし、私はするために、「停止ボタン」を望んでいた.....私はそれに取り組んでいカルーセルXDを停止するが、私両方の機能が分離されています（カルーセル用、ボタン用）。

ここでHTML

<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です：あなたはclearIntervalに渡す必要https://jsfiddle.net/k3g19dbo/

Answer 1

引数（ないclearTimeoutは）あなたがsetIntervalに渡された関数の名前、その値setInterval戻りものではありません。だから、次の操作を行います。

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

NB：clearTimeoutもほとんどのブラウザでは動作しますが、それはちょうどあなたがsetTimeoutを使用したときにsetIntervalを使用clearInterval、およびclearTimeoutを呼び出すために、より理にかなっています。