日期:2014-05-16  浏览次数:20408 次

setTimeout的一点小问题
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
<input type="button" value="开始计时!" onClick="timedCount()">

如上的代码,如果你点了两次计时按钮的话,就变成,相当于两个计时器了,c增大的速度就变快了。

但是,不是操作的同一个变量么?
为什么计时器会是这样???

------解决方案--------------------
js中,除了基本数据类型的赋值,其它类型赋值都是地址传递,也就是你第一次调用setTimeout(),将该地址赋值给t,第二次再调用时,又产生一个计数器,这时这个计数器的地址覆盖了t,其实是有两个setTimeout在运行,你可以在页面上再加一个按钮用来清除<input id="txt" type="button" value="clear" onClick="clear()"></body>

function clear(){
cleatTimeout(t);
}

这样你点击两次“开始计时”,在点击一次“clear”,页面上的计数器仍在运行,试试吧
------解决方案--------------------
启动了多个计时器了,启动新计时器时要先中断上一个计时器,这种逻辑用Timeout不好,还是用Interval吧。

var c=0,timer;

function timedCount()
{
clearInterval(timer);//终止上一个计时器
timer=setInterval("timedCount1()",1000)
};

function timedCount1(){
document.getElementById('txt').value=c;
c=c+1;
}




------解决方案--------------------
为什么会出现这种问题呢,我来解释一下.
var c=0//全局变量
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}


1.你的c是全局变量,不管执行多少次timedCount,修改的都是同一个c.
2.你的setTimeout("timedCount()",1000),是一自我直循环调用timedCount,永不停止,每次执行都产生一个新的timedCount事件插入javascript的执行线程的执行队列,此时队列里只有一个setTimeout的事件,只是每次这个执行完都再产生一个新的插入队列.
3.如果你点击n次按钮,那么timedCount()执行n次,也就产生了n个setTimeout事件,也就是javascript的执行队列里面有了n个setTimeout事件
4.同时存在n个执行事件修改c,那么c的增加速度自然是n倍的速度了
------解决方案--------------------
setTimeout() 方法的返回值是一个唯一的整数数值,
这个数值有什么用呢?如果你想要终止 setTimeout() 方法的执行,那就必须使用 clearTimeout() 方法来终止,而使用这个方法的时候,系统必须知道你到底要终止的是哪一个 setTimeout() 方法 (因为你可能同时调用了好几个 setTimeout() 方法),这样 clearTimeout() 方法就需要一个参数,这个参数就是 setTimeout() 方法的返回值 (数值),用这个数值来唯一确定结束哪一个 setTimeout() 方法。