js定时器问题？js高手请进！

今天写了个js定时器的问题：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.... 今天写了个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>
为什么？第一个函数明显没有关掉定时器，第二个程序定时器没有关掉。展开

 我来答

1个回答

#热议# 生活中有哪些实用的心理学知识？

起航人生f4
2013-04-04 · TA获得超过4321个赞

知道小有建树答主

回答量：693

采纳率：33%

帮助的人：899万

我也去答题访问个人页

关注

展开全部

很有意思的问题

第一个函数，其实是个逻辑错误

window.onload = function() {
    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 换位函数运行就正确了。

window.onload = function() {
    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

window.onload = function() {
    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();
};

本回答由提问者推荐

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js定时器问题？js高手请进！

其他类似问题

为你推荐：