setInterval 和 clearInterval 问题？

Question

$("#down").click(function(){ 
  $("#move").animate({top:'+=75px'}, 160, 'linear')
  });
$("#up").click(function(){ 
  $("#move").animate({top:'-=75px'}, 160, 'linear')
  });
function game(){
    var a = [0,10,15,20,25,35,40,45,50,55,62];
    var b = Math.floor(Math.random() * a.length);
    var c = a[b];
    $("#box").animate({right: '+=100%'}, 1000, 'linear');
    $("#box").animate({right: '-=100%'}, 10);
    $("#box").animate({top: c+'%'}, 0);    
};

var timer;
$("#start").on('click', function(){timer = setInterval(game,1000)})
$("#stop").on('click', function(){clearInterval(timer)})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
  <style>
    .move {
      border: 1px solid black;
      position: absolute;
      left: 50px; top: 40%;
      height: 40px; width: 40px;
      background-color: rgb(0,255,100);      
    }
    .box {
      border: 1px solid black;
      position: absolute;
      right: 0%; top: 26%;
      height: 38%; width: 2.2%;
      background-color: red
    }
  </style>
</head>
<body>

<div id = everything class = everything>
  <div class = move id = move></div>
  <div class = box id = box></div>
  <button id = start>Start</button>
  <button id = stop>Stop</button>
  <button id = down>DOWN</button>
  <button id = up>UP</button>
</div>

我在使用这个计时器来构建一个简单的游戏时遇到了问题。我要循环的函数是function game()，它使在屏幕最右侧初始化的div“框”一直动画到屏幕左侧，然后立即回到最右侧。从本质上讲，它会产生障碍物向玩家靠近的错觉。单击“开始”按钮设置间隔。点击“停止”应该会清除它。

如果我想设置间隔的周期，我知道我必须更改setInterval(game, x) 中的第二个值，但是当我给一个值 x 时，只有第一个实例延迟了那个量，然后函数循环不延误。我的函数或 setInterval 的执行有什么问题？您对改进我实现上述目标的方法有什么建议吗？

另外，我的clearInterval(timer) 有时只能工作，主要是在间隔时间很长的时候。函数中是否发生了太多事情，并且程序无法在短时间内清除间隔？感谢您的帮助。

Answer 1

我建议使用requestAnimationFrame 仍然可以为您的问题找到以下答案

1) 使用$().finish() 以更小的间隔停止动画。

2) 在您的start 中也使用clearInterval(timer)，就像您多次单击开始一样。

$("#down").click(function(){ 
  $("#move").animate({top:'+=75px'}, 160, 'linear')
  });
$("#up").click(function(){ 
  $("#move").animate({top:'-=75px'}, 160, 'linear')
  });
function game(){
    var a = [0,10,15,20,25,35,40,45,50,55,62];
    var b = Math.floor(Math.random() * a.length);
    var c = a[b];
    $("#box").animate({right: '+=100%'}, 1000, 'linear');
    $("#box").animate({right: '-=100%'}, 10);
    $("#box").animate({top: c+'%'}, 0);    
};

var timer;
$("#start").on('click', function(){game();clearInterval(timer); timer = setInterval(game,1000)})
$("#stop").on('click', function(){
 $("#box").finish();
clearInterval(timer)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
  <style>
    .move {
      border: 1px solid black;
      position: absolute;
      left: 50px; top: 40%;
      height: 40px; width: 40px;
      background-color: rgb(0,255,100);      
    }
    .box {
      border: 1px solid black;
      position: absolute;
      right: 0%; top: 26%;
      height: 38%; width: 2.2%;
      background-color: red
    }
  </style>
</head>
<body>

<div id = everything class = everything>
  <div class = move id = move></div>
  <div class = box id = box></div>
  <button id = start>Start</button>
  <button id = stop>Stop</button>
  <button id = down>DOWN</button>
  <button id = up>UP</button>
</div>