JavaScript如何使用setTimeout来实现轮循动画的实例详解

来源：动视网责编：小OO 时间：2020-11-27 15:20:34

JavaScript如何使用setTimeout来实现轮循动画的实例详解

代码如下：<，节约的内存空间 function move(){ window.clearTimeout(timer)；var curLeft = utils.css(oBox，"；left"；)；if(curLeft+step >；= maxLeft){//边界判断 utils.css(oBox，"；left"；，maxLeft)；return；} curLeft+=step；utils.css(oBox，"；left"；，curLeft)；timer = window.setTimeout(move，10) } move()；<；/script>；<；/body>；<；/html>。

推荐度：

点击下载本文 文档为doc格式

导读代码如下：<，节约的内存空间 function move(){ window.clearTimeout(timer)；var curLeft = utils.css(oBox，"；left"；)；if(curLeft+step >；= maxLeft){//边界判断 utils.css(oBox，"；left"；，maxLeft)；return；} curLeft+=step；utils.css(oBox，"；left"；，curLeft)；timer = window.setTimeout(move，10) } move()；<；/script>；<；/body>；<；/html>。

本文实例为大家分享了setTimeout实现轮循动画的具体代码，供大家参考，具体内容如下

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <p id='box'></p>
 <script>
 var oBox = document.getElementById("box");
 var maxLeft = utils.win('clientWidth')-oBox.offsetWidth;
 var step = 5;
 var timer = null;
 //使用递归思想完成setTimeout的轮循动画：每一次在执行动画之前把上一次设置没用的定时器清除掉，节约我们的内存空间
 function move(){
 window.clearTimeout(timer);
 var curLeft = utils.css(oBox,"left");
 if(curLeft+step >= maxLeft){//边界判断
 utils.css(oBox,"left",maxLeft);
 return;
 }
 curLeft+=step;
 utils.css(oBox,"left",curLeft);
 timer = window.setTimeout(move,10)
 }
 move();

 </script>
</body>
</html>

一直以为动画效果是用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明明是时间，为什么和距离的值一样？

首先回答第一个问题，

for循环其实是动画的关键，仅仅执行setInterval 只会使物体位移一次。可以先分析代码：当i为0的时候，物体移动1px，当 i 为1的时候，left为2px, 延迟了1毫秒。。当i为99的时候，left为100px，延迟99毫秒执行。。当i为199的时候，left为200px，延迟199毫秒执行。。延迟的时间与物体的移动呈递增状态。

所以，从单方面看，延迟和动画没有必然关系。但是从连续的角度（for循环起了作用），根据我们的视觉暂留，就形成了动画，用张图来表示：