jQuery setTimeout Funktionsstopp nicht anhalten Ausführung

Question

Es wird versucht, ein Diagramm zu erstellen, mit dem Benutzer auf Wiedergabe klicken können. Es wird mehrere Jahre durchlaufen und jedes Jahr für einige Sekunden im Diagramm angezeigt, bevor es zum nächsten geht.
Es sollte dem Benutzer auch ermöglichen, auf Pause zu klicken und die Animation anzuhalten. Hier versage ich.

Ich bin mir ziemlich sicher, mein Problem ist das Scoping, aber nicht 100%; Ich habe es dort, wo die Animation durchläuft, aber wenn der Benutzer auf Pause klickt, fährt er fort, durchzulaufen, und setzt die Animation nicht auf Pause. Ich kann sehen, clearInterval feuert in console.log ab, aber wieder tut es nichts und die Animation geht weiter.

Ich benutze setTimeout, um jedes Aussehen der Diagramme zu verzögern und (am wahrscheinlichsten in der falschen Weise) setInterval zu verwenden, um die Schleife zu planen. Ich habe eine Reihe von Antworten hier gelesen/versucht, die sich mit setTimeout und setInterval befassen, aber ohne Erfolg. Ich bin überzeugt, dass es mein Mangel an Verständnis ist, warum sie nicht arbeiten und nicht, dass meine Frage "anders ist" als die anderen.

Das heißt, ich habe seit drei Tagen meinen Kopf auf meinen Schreibtisch geschlagen und könnte hier wirklich einige Hinweise verwenden. Unten ist die JavaScript/jQuery, die ich mit gerade arbeiten bin:

jQuery('#animation-play').on('click', function() { 
    // loopThroughYears(); 
    var animation; 
    if (jQuery('#animation-play').hasClass('play')) { 
    jQuery('#animation-play').addClass('stop').removeClass('play').text('Pause Animation'); 
    var years = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015]; 
    var time = 1000; 
    if (animation) { 
     clearInterval(animation); 
    } 
    animation = setInterval(function() { 
     $.each(years, function(index, values) { 
     setTimeout(function() { 
      if (years.this < 2016) { 
      selectChartYear(values); 
      jQuery("#chart-years").val(values); 
      } 
     }, time); 
     }); 
    }, time); 
    } else { 
    jQuery('#animation-play').addClass('play').removeClass('stop').text('Play Animation'); 
    console.log("Timeout Cleared!"); 
    clearInterval(animation); 
    } 
}); 

Answer 1

Das animation Variable ist innerhalb des Click-Handler erklärt, jedes Mal ein Klick geschieht einen neuen erstellt.

Sie müssten diese Variable speichern, irgendwo anders, zum Beispiel auf dem Element mit jQuery data()

jQuery('#animation-play').on('click', function() { 
 
    
 
    clearInterval($(this).data('animation')); 
 
    
 
    if (jQuery('#animation-play').hasClass('play')) { 
 
     jQuery('#animation-play').addClass('stop') 
 
           .removeClass('play') 
 
           .text('Pause Animation'); 
 
            
 
     var years = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015]; 
 
     var time = 1000; 
 
     var self = $(this); 
 
     
 
     self.data('year', self.data('year') || -1); 
 
     
 
     self.data('animation', 
 
      setInterval(function() { 
 
      \t var idx = self.data('year') + 1; 
 
       if (idx > years.length) { 
 
       \t idx = 0; 
 
        self.trigger('click'); 
 
       } else { 
 
        var value = years[idx]; 
 

 
        //selectChartYear(value); 
 
        jQuery("#chart-years").val(value); 
 
       } 
 
       
 
\t \t \t \t self.data('year', idx); 
 
      }, time) 
 
     ); 
 
    } else { 
 
     jQuery('#animation-play').addClass('play') 
 
     \t \t \t \t \t \t .removeClass('stop') 
 
           .text('Play Animation'); 
 
            
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="animation-play" class="play"> 
 
    click here to start 
 
</div> 
 
<br/> 
 
<input id="chart-years" />