D3, Javascript Funktionsumfang mit setInterval und clearInterval und Event-Handler

Question

Ich benutze eine Taste, um eine Animation in D3 zu starten, zu stoppen und fortzusetzen.

Innerhalb der 'animateTheMap' Funktion weise ich setInterval 'animateTimer' zu, um die Animation zu starten, und füge ein click -Ereignis an dieselbe Schaltfläche an, um die Animation mit einer Callback-Funktion 'stopAnimateTheMap' zu stoppen.

Die Funktion 'stopAnimateTheMap' kann jedoch 'animateTimer' nicht sehen; daher wirft "animateTimer" ist nicht definiert.

1) Muss ich zwei Funktionen zusammenführen oder gibt es eine Möglichkeit, dies zu lösen? 2) Ich füge mehr als ein "Klick" -Ereignissen auf die gleiche Schaltfläche, um zu spielen und stoppen Sie die Animation Ist dies eine optimale/geeignete Art und Weise das Ereignis zu behandeln ich hatte anfangs jede Variable erstellt für jedes Ereignis und zugewiesen sie auf die Schaltfläche

Danke,

var animateMapButton = d3.select('body').append('button').attr({ 
             class: "button", 
             id: "animateMap"}) 
           .text("Animate the map") 

animateMapButton.on("click", animateTheMap) 

function animateTheMap(){ 
            animateMapButton.text("Stop the Animation") 
            animateMapButton.on('click',stopAnimateTheMap) 
            i=0;      

            var animateTimer = setInterval(function(){ 

             if(i<yearArray.length){ 
              i++; 
              d3.select('text.selected').classed('selected',false) 
              d3.select('#year'+yearArray[i]).classed('selected',true) 
              updateMapColor(yearArray[i]) 

              } 
             else{ 
              clearInterval(animateTimer) 
             } 
             },2500) 
          } 


function stopAnimateTheMap(){ 

            clearInterval(animateTimer)  
            animateMapButton.text("Animate the map")           
            animateMapButton.on("click",animateTheMap) 
           } 

Answer 1

für 1).?.: Sie müssen die animateTimer-Variable nur außerhalb der Funktion deklarieren

Für 2): Ich würde nur einen Klick-Handler verwenden, der zwischen animieren und nicht animieren schaltet.

var animateMapButton = d3.select('body').append('button').attr({ 
     class: "button", 
     id: "animateMap"}) 
    .text("Animate the map") 

animateMapButton.on("click", toggleAnimating) 

var animateTimer; 
var isAnimating = false 

function toggleAnimating(){ 
    if (isAnimating) { 
     clearInterval(animateTimer)  
     animateMapButton.text("Animate the map")           
    } 
    else { 
     animateMapButton.text("Stop the Animation") 
     i=0;      

     animateTimer = setInterval(function(){ 

      if(i<yearArray.length){ 
       i++; 
       d3.select('text.selected').classed('selected',false) 
       d3.select('#year'+yearArray[i]).classed('selected',true) 
       updateMapColor(yearArray[i]) 

      } 
      else{ 
       clearInterval(animateTimer) 
      } 
     },2500) 
    } 

    isAnimating = !isAnimating; 
}