将2个事件处理程序附加到一个元素以开始/停止动画

Question

我想将2个事件处理程序附加到一个button，以分别开始和停止动画。我正在尝试使用boolean值来测试动画是否已经运行，以便触发正确的事件处理程序。即，如果动画不运行boolean是错误的，因此运行动画事件处理程序将触发。一旦我尝试添加这两个处理程序，代码断开，动画就不会运行。我以前从未尝试过在元素上使用2个事件处理程序，也没有在线看到它，所以我不确定我是否以正确的方式进行此操作。

我如何连接这些处理程序以启动和停止动画？

    <div id='robotCont'></div>    
         <button id='animeBtn'>start/stop animation</button>
div#robotCont {
width:125px;
height:160px;
border:1px solid #22e;
background-image:url("images/robot.jpg");
background-repeat: no-repeat;
background-position: 0px 0px;
}
var robotSwitch = false;
document.getElementById('animeBtn').onclick = function() {
 if(robotSwitch == false) {
  runningRobot();
 } else {
  stopRobot();
}
}
var decrement = 0;
function runningRobot() {
  var robotCont = document.getElementById('robotCont');
  if(decrement < -1900) {
  decrement = 0;
 }
 robotCont.style.backgroundPosition = decrement+ 'px 0px';
 decrement -= 120;  
 timer = setTimeout(runningRobot,100);
 robotSwitch = true;
}

function stopRobot() {
  clearTimeout(timer);
}

Answer 1

何处：

var animate = false
timer;
document.getElementById('animeBtn').onclick = function() {
animate = !animate;
 if(animate) {
    runningRobot();   
 } else {
    stopRobot();
 }
} 
var decrement = 0;
function runningRobot() {
  var robotCont = document.getElementById('robotCont');
  if(decrement < -1900) {
     decrement = 0;
  }
 robotCont.style.backgroundPosition = decrement+ 'px 0px';
 decrement -= 120;  
 timer = setTimeout(runningRobot,100);

}

function stopRobot() {
  clearTimeout(timer);
}