<span style="font-size:18px;"> window.οnlοad=function()
{
var i=0;
var timer;
but.οnclick=function()
{
timer=setInterval(
function()
{
i++;
document.write(i)
}
,1000)
}
but2.οnclick=function()
{
clearInterval(timer);
}
}</span><span style="font-size:18px;">
</span>
这样的一段代码,在点击执行后,可以暂停,但是在运行过程会发现,多次点击开始执行,i的数字变化会越来越快,甚至到了后面即使是点击暂停也控制不了的地步,这显然不是我们想要得到的结果,如何在多次点击开始执行后,定时器还是按原来的速度运行,办法很简单,只需要在定时器开始执行前加一个停止的,即在
如何在多次点击开始执行后,定时器还是按原来的速度运行?
办法很简单,只需要在定时器开始执行前加一个停止的,即在
<pre name="code" class="javascript"><span style="font-size:18px;">setInterval</span>
之前加上
<span style="font-size:18px;">clearInterval</span>
,这样就能很好的解决这个问题。
究其原因,如果没有在setInterval之前加上clearInterval,那么每多点击一次,setInterval,定时器的运行速度是原来的基础上加快一倍,速度由原来的1s变成0.5s..0.25s..... ,而加上cearInterval后,每次点击开始执行的按钮时,定时器就会先停下来,再开始执行,相当每次都是由“0”开始执行,而不是从“1”的基础上累加执行。
所以,解决上面代码中问题的正确代码是
<span style="font-size:18px;">window.οnlοad=function()
{
var i=0;
var timer;
but.οnclick=function()
{
<span style="background-color: rgb(51, 102, 255);"><span style="color:#33FFFF;">clearInterval(timer);</span></span>
timer=<span style="background-color: rgb(204, 51, 204);"><span style="color:#FF99FF;">setInterval</span></span>(
function()
{
i++;
document.write(i)
}
,1000)
}
but2.οnclick=function()
{
clearInterval(timer);
}
}</span>