D3，带有setInterval和clearInterval以及事件处理程序的javascript函数范围

我用一个按钮来启动、停止和恢复D3中的动画

在“animateTheMap”函数中，我将setInterval指定给“animateTimer”以开始动画，并将单击事件附加到同一按钮以使用回调函数“stopAnimateTheMap”停止动画

但是，stopAnimateTheMap函数无法看到“animateTimer”；因此，未定义“animateTimer”

1） 我需要合并两个函数还是有办法解决这个问题？ 2） 我将多个“单击”事件添加到同一按钮以播放和停止动画。这是处理事件的最佳/适当方式吗？我最初为每个事件创建了每个变量，并将它们分配给按钮

谢谢,

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)
                              }

var animateMapButton=d3.select（'body'）.append（'button'）.attr（{ 类：“按钮”， id:“动画映射”}） .text（“为地图设置动画”） 动画按钮。打开（“单击”，动画地图） 函数animateTheMap（）{ 文本（“停止动画”） animateMapButton.on（'单击'，停止AnimateMap） i=0； var animateTimer=setInterval（函数（）{ if（iFor 1）：只需在函数外部声明animateTimer变量

对于2）：我将只使用一次单击处理程序，在动画和非动画之间切换

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;
}

var animateMapButton=d3.select（'body'）.append（'button'）.attr（{ 类：“按钮”， id:“动画映射”}） .text（“为地图设置动画”） animateMapButton.on（“单击”，切换动画化） 变应原； var isAnimating=false 函数toggleAnimating（）{ 如果（正在进行模拟）{ clearInterval（动画编辑器） 文本（“为地图设置动画”） } 否则{ 文本（“停止动画”） i=0； animateTimer=setInterval（函数（）{ 如果（i）