本文实例为大家分享了settimeout实现轮循动画的具体代码，供大家参考，具体内容如下
代码如下：
Document
一直以为动画效果是用setInterval来执行的。也比较好理解，一直执行下去，直到条件再次出现时清除setInterval。
这几天看了用setTimeout来做动画的例子，起初我是不理解的。动画和延迟执行有毛关系（其实是有关系的，后面会讲到。）代码是这样子的：
for ( i=0; i<200; i++){
setTimeout ( function(){
var left = el.style.left ? el.style.left : 0;
left = parseInt( left ) +1;
el.style.left = left+ "px";
} , i );
}代码就是以上样子的啦。我当时所不理解的是，为什么每次都要延迟的时间递增？为什么刚好到200px就停止执行了，i明明是时间，为什么和距离的值一样？
立即学习“Java免费学习笔记（深入）”；
首先回答第一个问题，
for循环其实是动画的关键，仅仅执行setInterval 只会使物体位移一次。可以先分析代码：当i为0的时候，物体移动1px，当 i 为1的时候，left为2px, 延迟了1毫秒。。。。当i为99的时候，left为100px，延迟99毫秒执行。。。当i为199的时候，left为200px，延迟199毫秒执行。。。延迟的时间与物体的移动呈递增状态。
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
所以，从单方面看，延迟和动画没有必然关系。但是从连续的角度（for循环起了作用），根据我们的视觉暂留，就形成了动画，用张图来表示：
循环起来，就形成了动画效果。
第二个问题：
当动画结束时，恰巧距离是200，这和i有什么关系呢？其实没有直接关系。只是当i自增1的时候，left也恰好是自增i，如果将left的值每次都加3，那么看到的就是不一样的结果了。（最终应该是600，还是有关系的，因为循环了200次）。
