用js源码做出缓动效果，关于for循环和settimeout
html部分<body><divid="test"></div></body>style部分<style>#test{width:100%;height:200px;po...
html部分
<body>
<div id="test">
</div>
</body>
style部分
<style>
#test{width:100%;height:200px;position:absolute;bottom:0;border:1px solid red;}
</style>
js部分
<script type="text/javascript">
var div = document.getElementById("test");
div.onclick = function(){
var style = window.getComputedStyle(div,null),
bottom = style.getPropertyValue('bottom');
for(var i=0;i<=200;i++){
setTimeout(function(){
bottom = parseFloat(bottom) + 1;
div.style.bottom = bottom + "px";
},25*i);
};
};
</script>
在一开始的时候，settimeout函数的时间间隔用的是25，但是得不到效果，后来我鬼使神猜的改成，25*i，结果缓慢移动的效果出来了，谁能解释一下这是为什么。 展开
<body>
<div id="test">
</div>
</body>
style部分
<style>
#test{width:100%;height:200px;position:absolute;bottom:0;border:1px solid red;}
</style>
js部分
<script type="text/javascript">
var div = document.getElementById("test");
div.onclick = function(){
var style = window.getComputedStyle(div,null),
bottom = style.getPropertyValue('bottom');
for(var i=0;i<=200;i++){
setTimeout(function(){
bottom = parseFloat(bottom) + 1;
div.style.bottom = bottom + "px";
},25*i);
};
};
</script>
在一开始的时候，settimeout函数的时间间隔用的是25，但是得不到效果，后来我鬼使神猜的改成，25*i，结果缓慢移动的效果出来了，谁能解释一下这是为什么。 展开
展开全部
因为你定义了200个定时器
从第一个到最后一个定时器
每个休息的时间是i的25倍
而i从0到200改变
因此
定时器的休息时间越来越久
于是看得到移动的效果
不然就一起移动了，看不到效果，因为都是最后的那个200
从第一个到最后一个定时器
每个休息的时间是i的25倍
而i从0到200改变
因此
定时器的休息时间越来越久
于是看得到移动的效果
不然就一起移动了，看不到效果，因为都是最后的那个200
追问
我百度找了一些资料，据说for循环里面的settimeout函数，执行循环是不需要等settimeout函数里面的那个时间间隔的，也就是说定时器几乎是瞬间同时形成，瞬间同时执行。按照这样的理解对吗？此外，总感觉这段代码效率有点低，上面的代码如果要优化的话，应该怎么做呢？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
