javascript自动控制图片切换速度为什么会越来越快

入门新手我写了一个最基础的图片自动切换程序,刚开始图片切换按照设定是2秒一次,但是到后面就会越来越快,这是为什么?代码如下(写的很烂,求各路高人指教)
<!DOCTYPE html>
<html>
<body onload="a()">

<img id="image" src="1.png" />
<script>

function a()
{
document.getElementById("image").src="1.png"
var t= setInterval(b, 2000);

}
function b()
{
document.getElementById("image").src="2.png";
var t= setInterval(c, 2000);
}
function c()
{
document.getElementById("image").src="3.png";
var t= setInterval(a, 2000);
}
</script>

</body>
</html>

首先,从代码来看你对js还不是特别了解

其次要说说你这3段代码的逻辑了,每个函数都包含对另一个函数的调用,但是是通过setInterval调用的,相当于在2秒后,调用指定函数(比如function a中的b),但是问题在于他们可是不互斥的,当你用a调用了b后,你想着目前流程走到了b,下一步应该准备掉c了,可是令你想不到的是此时function a并没有停止,他仍然会2秒后,调用b,function b在首次调用c的同时也没有停止,仍然会在2秒后再次调用c

更严重的问题:我不是开发前端的,但是据了解js的代码类似堆栈调用,你每次调用我想可能都会造成压栈操作,每个function中都引用了另一个操作,不知道时间久了会不会造成内存溢出,那么最终的效果就不是线性增长(比如每次最多调用3方法),而是1、2、4、8成指数的上涨

测试方法:你可以在function a、b、c中各加一个输出,输出到某一个div中,就明白了追问

啊啊啊啊你说的太对了,编程这一块我不是特别了解还是个傻逼。作为一个傻逼级别新手我想问为什么a调用b之后a还没有停止?

追答

你只是开始了计时器,并没有让其终止。
你可以试试uuexxe的代码

温馨提示:内容为网友见解,仅供参考
第1个回答  2014-03-29

这是把浏览器搞崩溃的节奏吗。。指数级雪崩。

去掉b,c,改成只用这个

function a(){
  var img = document.getElementById('image');
  setInterval(fucntion(){
    img.src= img.src=="1.png" ?
    "2.png" : img.src=="2.png" ?
    "3.png" : "1.png";
  },2000)
}

追问

我能弱弱的说我改了但是图片不会自动播放么。。。。。代码如下

追答

setInterval(fucntion(){这里写错了,是function(我说怎么两个function关键字颜色不一样呢),楼主写js就用下调试器吧

ie8+,chrome,safari,火狐(最好去装firebug)按F12,,

第2个回答  2014-03-29
因为在第二次走定时器的时候,你没有把上一次的定时器清除clearInterval()
第3个回答  2015-07-12

以前遇到过这种问题,请考虑以下:

    定时器是否没有及时删除;

    定时器是否有增加的地方;

    重点检查鼠标进入和移出时候代码,看看是否此处增加了定时器;

    检查定时器间隔的值是否逐渐缩小。

相似回答