关于javascript中setTimeout()和clearTimeout()的疑惑。

时间:2023-03-08 22:16:36

由于在w3school中学习javascript时,当学到setTimeout()和clearTimeout()方法时。根据它所提供的例子(下面的代码转自w3cschool)—计数程序,发现当你不停的点击开始计数得到button, 计数将会加快,给我的感觉是同时运行好几个计数方法,但是我所不清楚的是这几个方法是同步执行还是异步执行。此时,如果你想要停止setTimeout()方法,你需点击停止button的次数与你点击开始计数button的次数相同。

我觉着这里怎么同步和异步机制都可以解释。希望可以随着我对javascript的学习能够解决这个问题。

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}

function stopCount()
{
c=0;
setTimeout("document.getElementById('txt').value=0",0);
clearTimeout(t);
}
</script>
</head>

<body>

<form>
<input type="button" value="开始计时!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时!" onClick="stopCount()">
</form>

<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时,从 0 开始。点击“停止计时”按钮可以终止计时,并将计数重置为 0。</p>

</body>

</html>