javascript自动控制图片切换速度为什么会越来越快
入门新手我写了一个最基础的图片自动切换程序，刚开始图片切换按照设定是2秒一次，但是到后面就会越来越快，这是为什么？代码如下（写的很烂，求各路高人指教）<!DOCTYPEh...
入门新手我写了一个最基础的图片自动切换程序，刚开始图片切换按照设定是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> 展开
<!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> 展开
4个回答
展开全部
首先，从代码来看你对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中，就明白了
其次要说说你这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的代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这是把浏览器搞崩溃的节奏吗。。指数级雪崩。
去掉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就用下调试器吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
因为在第二次走定时器的时候，你没有把上一次的定时器清除clearInterval()
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
以前遇到过这种问题，请考虑以下：
定时器是否没有及时删除；
定时器是否有增加的地方；
重点检查鼠标进入和移出时候代码，看看是否此处增加了定时器；
检查定时器间隔的值是否逐渐缩小。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
