Question

我想将2个事件处理程序附加到一个button以分别启动和停止动画。我正在尝试使用boolean值来测试动画是否已经运行，因此触发了正确的事件处理程序。即如果动画未运行，则boolean为false，因此运行动画事件处理程序将触发。一旦我尝试添加其中一个或两个处理程序，代码就会中断并且动画将不会运行。我之前没有尝试在元素上使用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);
}

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

1 个答案: