Scoping-Problem mit der Verwendung von clearTimeout

Question

Ich verwende setTimeout, um eine Diashow zu starten. Ich möchte einen Knopf haben, um es zu stoppen. Das Markup ist:

<h3> Modest Mouse at Fillmore in Miami <h3> 

    <div> 
    <img id="photo" src="http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg" alt= "Modest Mouse at Fillmore"> 
     <span>&bull;</span> 
     <span>&bull;</span> 
     <span>&bull;</span> 

    </div> 

    <button onclick="stopShow();">Stop</button> 

Die JS ist:

var aSlideShowPics = ["http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg", 
    "http://the305.com/blog/wp-content/uploads/2014/05/modestmoude7.jpg", 
    "http://the305.com/blog/wp-content/uploads/2014/05/modestmouse8.jpg" 
]; 

    // Timer for SlideShow 

var i = 0; 
    function changeSlide() { 
      var stopShowID; 
      stopShowID = window.setTimeout(function() { 
       newPic = aSlideShowPics[i];  
       $("#photo").attr("src", newPic); 
       i++; 
       if (i < aSlideShowPics.length) { 
       changeSlide(); // recursive call to increment i and change picture in DOM. 
       } else { 
         i = 0; // reset loop to keep slideshow going 
         changeSlide(); // Recursive call on loop end 
       } 

       function stopShow() { 
       window.clearTimeout(stopShowID); 
       } 
     }, 3000) 
    } 

changeSlide(); 

Ich halte einen Referenzfehler auf die Schaltfläche klicken, ohne stopShow bekommen. Ich habe versucht, die clearTimeout-Funktion an mehreren Stellen im Code, aber den gleichen Fehler zu bekommen. Vielleicht kann eine neue Reihe von Augen meinen Fehler sehen. Hier ist die jsfiddle. Danke für jede Eingabe.

Answer 1

Verschieben Sie die stopShow außerhalb des Timeouts und außerhalb von changeSlide.

var stopShowID; 
function changeSlide() { 
    stopShowID = window.setTimeout(function(){}, 3000);  
} 
function stopShow() { 
    if(stopShowID) { 
     window.clearTimeout(stopShowID); 
     stopShowID = null; 
    } 
} 

Answer 2

Ich konnte nicht Ihr jsfidle Beispiel starten, so dass ich den Inhalt des Codes aktualisieren, 2 aufgeworfenen Fragen:

1- Ihre stopShow undefiniert waren, so dass ich es angebracht, um Fenster -umfang: Fenster. stopShow = stopShow;

2- Für Ihr Problem mit dem ClearTimeout-Bereich: Ihre stopShowID Variable befand sich in Ihrer Funktion changeSlide: Ihre stopShow verwendete eine lokale Kopie. Ich stelle es im Grunde als globale Variable dar, so dass beide Funktionen darauf zugreifen können.

var aSlideShowPics = ["http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg", 
    "http://the305.com/blog/wp-content/uploads/2014/05/modestmoude7.jpg", 
    "http://the305.com/blog/wp-content/uploads/2014/05/modestmouse8.jpg" 
]; 

    // Timer for SlideShow 

var stopShowID; 
var i = 0; 

function stopShow() { 
    window.clearTimeout(stopShowID); 
} 

window.stopShow = stopShow; 

    function changeSlide() { 

      stopShowID = window.setTimeout(function() { 
       newPic = aSlideShowPics[i];  
       $("#photo").attr("src", newPic); 
       i++; 
       if (i < aSlideShowPics.length) { 
       changeSlide(); // recursive call to increment i and change picture in DOM. 
       } else { 
         i = 0; // reset loop to keep slideshow going 
         changeSlide(); // Recursive call on loop end 
       } 


     }, 3000) 
    } 


changeSlide(); 

Arbeits jsfiddle:
http://jsfiddle.net/fLw2a4vs/44/

Answer 3

die stopShow() Methode nicht auf der Fensterebene nicht vorhanden ist, es existiert nur in dem Körper des changeSlide(). Direkt befestigen Sie es an Fenster

window.stopShow = function() ... 

oder es aus dem

var i = 0; 
var stopShowId; 
function stopShow() { 
    window.clearTimeout(stopShowID); 
} 

function changeSlide() { 
    stopShowID = window.setTimeout(function() { 
     if (i >= aSlidesShowPics.length - 1) 
      i = 0; 

     var newPic = aSlideShowPics[i++];  
     $("#photo").attr("src", newPic); 
     changeSlide();  
     }, 3000); 
    }