JavaScript中关于定时器越来越快的一点分享

<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>