setInterval和clearInterval问题?

时间:2020-01-03 07:08:09

标签: javascript jquery setinterval clearinterval

$("#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)有时仅工作,大部分时间间隔较长。函数中是否发生了太多的事情,程序无法在短时间内清除间隔?感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

我建议您使用s = pd.to_numeric(df[0], errors='coerce') df[0] = s.where(s.isin(range(2010, 2020))) print (df) 0 1 0 NaN Banks 1 NaN Axis Bank 2 NaN ICICI 3 NaN PNB 4 2010.0 KYB 5 NaN Indus Ind 6 NaN Karur 仍在下面的答案中

1)使用requestAnimationFrame以较小的间隔停止动画。

2)还要在$().finish()中使用clearInterval(timer),就好像您多次单击开始一样。

start
$("#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)
})