当前位置： 文江博客话题详情

js计时器clearInterval的清除

发布于 2021-11-10 16:30:26 字数 76 浏览 812 评论 8

如何用clearInterval清除几个计时器啊，clearInterval(timer1，timer2，timer3，timer4，);为什么不对啊？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（8）

青萝楚歌 2021-11-11 19:54:49

没能解决按多次小方块速度不变的问题，因为当按一次向下 的键小方块向下走一步，这时direction = "xia"了，从而if(direction == "xia"){return false; }，当计时器timer1 = setInterval("xia()",500)再调用这个函数时因为direction = "xia"所以不执行了。还是要谢谢你的回答。

回复
醉生梦死 2021-11-11 19:54:49

非常感谢

回复
樱花落人离去 2021-11-11 19:54:49

<body>
<div id="desktop" style="border:1px solid #000; width:500px; height:500px; margin:0 auto; position:relative;">
 <div id="object" style="position:absolute; top:10px; left:10px; width:10px; height:10px; background-color:#F00;"></div>
</div>
<script type="text/javascript">
var timer1,timer2,timer3,timer4;
var direction = null;
function xia(){
     if(direction == "xia"){return false; }
  document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)+ 10) + "px";
  if(parseInt(document.getElementById("object").style.top) > 490){
   document.getElementById("object").style.top = 490 + "px";
  }
  clearTimeout(timer2);
  clearTimeout(timer3);
  clearTimeout(timer4);
  timer1 = setTimeout("xia()",5000);
  direction = "xia";
}
function shang(){
 //if(direction == 'shang') return false; 
  //direction = 'shang'; 
 document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)- 10) + "px";
   if(parseInt(document.getElementById("object").style.top) <0){
   document.getElementById("object").style.top = 0 + "px";
  }
}
function zuo(){
 //if(direction == 'zuo') return false; 
  //direction = 'zuo'; 
 document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)- 10) + "px";
  if(parseInt(document.getElementById("object").style.left) <0){
   document.getElementById("object").style.left = 0 + "px";
  }
}
function you(){
 //if(direction == 'you') return false; 
  //direction = 'you'; 
 document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)+ 10) + "px";
  if(parseInt(document.getElementById("object").style.left) > 490){
   document.getElementById("object").style.left = 490 + "px";
  }
}
document.onkeydown = function(e){
 var tops = document.getElementById("object").style.top;
 var e = e || window.event;
 switch(e.keyCode){
  case 40:
   xia();
  break;
  case 38:
  clearInterval(timer1);
   clearInterval(timer3);
   clearInterval(timer4);
    timer2 = setInterval("shang()",500);
  break;
  case 37:
  clearInterval(timer2);
   clearInterval(timer1);
   clearInterval(timer4);
    timer3 = setInterval("zuo()",500);
  break;
  case 39:
  clearInterval(timer2);
   clearInterval(timer3);
   clearInterval(timer1);
    timer4 = setInterval("you()",500);
  break;
  default:
     document.write("I'm looking forward to this weekend!")

 }
};
</script>

</body>完整代码如上，请高手指点。

回复
好听的两个字的网名 2021-11-11 19:54:48

整个页面是这样的 <body> <div id="desktop" style="border:1px solid #000; width:500px; height:500px; margin:0 auto; position:relative;"> <div id="object" style="position:absolute; top:10px; left:10px; width:10px; height:10px; background-color:#F00;"></div> </div> <script type="text/javascript"> var timer1,timer2,timer3,timer4; var direction = null; function xia(){ if(direction == "xia"){return false; } document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)+ 10) + "px"; if(parseInt(document.getElementById("object").style.top) > 490){ document.getElementById("object").style.top = 490 + "px"; } clearTimeout(timer2); clearTimeout(timer3); clearTimeout(timer4); timer1 = setTimeout("xia()",500); direction = "xia"; } function shang(){ if(direction == 'shang') return false; direction = 'shang'; document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)- 10) + "px"; if(parseInt(document.getElementById("object").style.top) <0){ document.getElementById("object").style.top = 0 + "px"; } } function zuo(){ if(direction == 'zuo') return false; direction = 'zuo'; document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)- 10) + "px"; if(parseInt(document.getElementById("object").style.left) <0){ document.getElementById("object").style.left = 0 + "px"; } } function you(){ if(direction == 'you') return false; direction = 'you'; document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)+ 10) + "px"; if(parseInt(document.getElementById("object").style.left) > 490){ document.getElementById("object").style.left = 490 + "px"; } } document.onkeydown = function(e){ var tops = document.getElementById("object").style.top; var e = e || window.event; switch(e.keyCode){ case 40: xia(); break; case 38: clearInterval(timer1); clearInterval(timer3); clearInterval(timer4); timer2 = setInterval("shang()",500); break; case 37: clearInterval(timer2); clearInterval(timer1); clearInterval(timer4); timer3 = setInterval("zuo()",500); break; case 39: clearInterval(timer2); clearInterval(timer3); clearInterval(timer1); timer4 = setInterval("you()",500); break; default: document.write("I'm looking forward to this weekend!") } }; </script> </body> 请高手指点。

回复
琴流音 2021-11-11 19:54:41
document.onkeydown = function(e){
 var timer1,timer2,timer3,timer4;

改成

// 不要每次执行时都要初始化计数器
var timer1,timer2,timer3,timer4;
document.onkeydown = function(e){

定义一个全局方向标志，例如 var direction = null;

function xia(){
 if(direction == 'xia') return false;
 direction = 'xia';
 document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)+ 10) + "px";
  if(parseInt(document.getElementById("object").style.top) > 490){
   document.getElementById("object").style.top = 490 + "px";
  }
}

回复
凡尘雨 2021-11-11 19:54:01

麻烦高手看看，问题出在clearInterval(timer2);clearInterval(timer3);clearInterval(timer4);当运行xia()时应该把其他的计时器清除，可是实际上还是没清除了。还有就是当按了一下向下的键时，下方块向下运动，当再按一下时，小方块会加快速度，如何才能保证按了多下小方块的速度不变啊

回复
各自安好 2021-11-11 19:51:18

function xia(){
 document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)+ 10) + "px";
  if(parseInt(document.getElementById("object").style.top) > 490){
   document.getElementById("object").style.top = 490 + "px";
  }
}
function shang(){
 document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)- 10) + "px";
   if(parseInt(document.getElementById("object").style.top) <0){
   document.getElementById("object").style.top = 0 + "px";
  }
}
function zuo(){
 document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)- 10) + "px";
  if(parseInt(document.getElementById("object").style.left) <0){
   document.getElementById("object").style.left = 0 + "px";
  }
}
function you(){
 document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)+ 10) + "px";
  if(parseInt(document.getElementById("object").style.left) > 490){
   document.getElementById("object").style.left = 490 + "px";
  }
}
document.onkeydown = function(e){
 var timer1,timer2,timer3,timer4;
 var tops = document.getElementById("object").style.top;
 var e = e || window.event;
 switch(e.keyCode){
  case 40:
    timer1 = setInterval("xia()",500);
   clearInterval(timer2);
   clearInterval(timer3);
   clearInterval(timer4);
  break;
  case 38:
    timer2 = setInterval("shang()",500);
   clearInterval(timer1);
   clearInterval(timer3);
   clearInterval(timer4);
  break;
  case 37:
    timer3 = setInterval("zuo()",500);
   clearInterval(timer2);
   clearInterval(timer1);
   clearInterval(timer4);
  break;
  case 39:
    timer4 = setInterval("you()",500);
   clearInterval(timer2);
   clearInterval(timer3);
   clearInterval(timer1);
  break;
  default:
     document.write("I'm looking forward to this weekend!")

 }
};
这是我写的函数，想写个类似贪吃蛇的游戏，按键盘上的向上的方向键，小方块想上走，按向下的向下走，可是我连按这两个方向键时，它即向上又向下，怎么办呢？

回复
平定天下 2021-11-11 15:58:19

这个函数只接受一个参数clearInterval(id_of_setinterval)

你可用通过多次调用，来清理

for(i=0;i<5;i++0)
{
      clearInterval('timer'+$i)
}

回复
~没有更多了~

关于作者

飘过的浮云

暂无简介

0 文章
0 评论
537 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文