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 "box" 在屏幕最右侧初始化，一直动画到屏幕左侧，然后立即回到最右边。从本质上讲，它会产生障碍物向玩家袭来的错觉。单击按钮 "start" 设置间隔。单击 "stop" 应将其清除。

如果我想设置间隔的周期，我知道我必须更改 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>

setInterval 和 clearInterval 问题？

setInterval and clearInterval issues?

javascript

jquery

setinterval

clearinterval