js定时器问题？js高手请进！
今天写了个js定时器的问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script language="javascript">
window.onload=function(){
var t=null;
var i=0;
function a(){
i++;
console.log(i);
if(i==20){
clearTimeout(t);
}
t=setTimeout(a,10);
}
a();
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
这样一个函数，在火狐下，输出到32，在ie和chrome下会一直执行。为什么？分析一下原因。
而在下面这个程序中，点击“end"为什么可以彻底关掉定时器。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",100)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="start" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="end" onClick="stopCount()">
</form>
</body>
</html>
为什么？第一个函数明显没有关掉定时器，第二个程序定时器没有关掉。
很有意思的问题
第一个函数，其实是个逻辑错误
var t = null;
var i = 0;
function a() {
// 1,2,3,4,5,6,7...
i++;
console.log(i);
if(i == 20) {
// t 被 clearTimeout
clearTimeout(t);
// 但函数还在继续运行
}
// t 重新被 setTimeout
// 从此处开始 i 不可能再等于 20
// 因此程序一直执行下去
t = setTimeout(a, 10);
}
a();
};
如果将 clearTimeout 和 setTimeout 换位函数运行就正确了。
var t = null;
var i = 0;
function a() {
i++;
console.log(i);
t = setTimeout(a, 10);
if(i == 20) {
// t 被 clearTimeout，从此 a 不会再被执行
// 到 20 在任何浏览器都停止
clearTimeout(t);
}
}
a();
};
至于 Firefox 到 32 结束，这应该是 Firefox 的 bug。
如果你 google 一下 firefox settimeout bug：About 217,000 results.
-----------
第二个函数没看出什么问题，程序就是应该按照写得那样执行。
t 为全局变量，当 ctopCount 被调用时，将它 clearTimeout。
此时 timedCount 还在继续，但发现 t 被 clearTimeout，函数停止执行。
追问在第一个程序中将判断条件改成if(i>20)，发现还是一直运行。怎么解释？
追答和之前是一个道理，
clear - set - 执行 a() - console.log
clear - set - 执行 a() - console.log
clear - set - 执行 a() - console.log
var t = null;
var i = 0;
function a() {
// 1,2,3,4,5,6,7...
i++;
console.log(i);
// 21，clearTimeout(t);
// 22，clearTimeout(t);
// 23，clearTimeout(t);
if(i > 20) {
clearTimeout(t);
}
// 但是，函数还在继续运行
// t 重新被 setTimeout
// 10ms 后 a 再次被执行，console.log 在前，所以输出
// 就这样一直循环下去、、、
t = setTimeout(a, 10);
}
a();
};
