为了账号安全，请及时绑定邮箱和手机立即绑定

请问这个无线循环的问题出在哪了？

首页 猿问 请问这个无线循环的问题出在哪了？

请问这个无线循环的问题出在哪了？

JavaScript
慕粉4062053 2016-12-13 20:09:05
在浏览器中运行后，点一下”开始“按钮，文本框中的数字就会按照setTimeout()中设计的时间间隔来运行，但是在代码运行的时候再次点击“开始”按钮，文本框中的数字变化的时间间隔就会变快，请问是什么原因呢？<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>无限循环</title> <script type="text/javascript"> var num=0; function numCount(){   document.getElementById('text').value=num;   num=num+1;   setTimeout("numCount()",1000); } </script> </head> <body> <input type="text" id="text" /> <input type="button" value="开始" onclick="numCount()"  /> </body></html>
查看完整描述

3 回答

已采纳
?
MarlboroKay

TA贡献189条经验 获得超236个赞

有相同超时时间的定时器，按添加的顺序触发
setTimeout方法被执行后，会加入到JS的定时器执行队列中，JS会计算超时的时间的先后设置好触发的时间点，当事件循环检查到有定时器需要触发就执行对应的函数

var num=0;
var timeTag;
function numCount(){
 clearTimeout(timeTag);
	
  document.getElementById('text').value=num;
  num=num+1;
 
  timeTag = setTimeout('numCount()',1000);
}

感谢邀请，望采纳！

查看完整回答
4 反对 回复 2016-12-13
  • 慕粉4062053
    慕粉4062053
    谢谢指点
    回复 2016-12-14
  • MarlboroKay
    MarlboroKay
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无限循环</title> <script type="text/javascript"> var num=0; var timeTag; function numCount(){ clearTimeout(timeTag); document.getElementById('text').value=num; num=num+1; timeTag=setTimeout("numCount()",1000); } </script> </head> <body> <input type="text" id="text" /> <input type="button" value="开始" onclick="numCount()" /> </body> </html> 可以
    回复 2016-12-14
  • 慕粉4062053
    慕粉4062053
    谢谢了
    回复 2017-01-08
点击展开后面1条
?
Siming0

TA贡献16条经验 获得超32个赞

再次点击“开始”的时候就再次运行了numCount()；这样相当于再设定了定时器，这样会叠加时间的，时间间隔就会变快， 应该在setTimeout("numCount()",1000);先清除定时器clearTimeout(timer)（不管有没有，清除掉先）然后进行定义这个定时器为var timer=setTimeout("numCount()",1000); 这样就不会再次叠加了


查看完整回答
4 反对 回复 2016-12-13
?
沉醉美少年

TA贡献24条经验 获得超11个赞

定时器设置后没有清除的缘故

在function numCount()开始的时候需要清除定时器

比如

var t;

function numCount(){

  clearTimeout(t);

  document.getElementById('text').value=num;

  num=num+1;

  t = setTimeout("numCount()",1000);

}


查看完整回答
2 反对 回复 2016-12-13
?
  • 3 回答
  • 0 关注
  • 1843 浏览
慕课专栏
更多

添加回答

了解更多

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信