初识JS定时器

最近在学JS种的运动，用到了定时器，出了这样那样的问题，特意了解了一下JS定时器，写下作为总结和回顾。

JS中定时器分为两种：setTimeout和setInterval，以下作为对比来讲。

1.setTimeout：

语法：setTimeout(method,time);
两个参数，method参数是要执行的代码（一般是函数），time参数是指延迟time毫秒将定时器的代码添加到队列中，而不是何时执行代码，注意，只执行一次。setTimeout()有返回值，当要清除定时器时，可以获取返回值，然后执行clearTimeout(返回值)，即可清除。写个demo来理解一下：

// 这是即将在定时器中执行的函数function Method(){    alert("javascript");}var timer=setTimeout(Method,1000);   //注意这里是Method而不是Method()，如果是Method()，应该加上引号，以字符串的形式作为参数传进去，setTimeout('Method()',1000);            //用timer变量存储定时器的返回值方便之后停止定时器 Method函数将延迟1000ms执行clearTimeout(timer);         //清除定时器

注意：setTimeout()是让代码延迟time时间才执行，而具体什么时候执行，这取决于它加入到JS队列的顺序。定时器的工作方式是，当特定的时间过去后，将代码插入，注意添加到队列并不意味着它会马上执行，而只能说它会尽快执行，设定一个250ms后执行的定时器，不代表250ms后它会马上执行，它只会表示在250ms后被加入到队列中，如果这个时间点队列是空闲的，那么这段代码就会被执行。

2.setInterval:

语法:setInterval(Method,time);
和setTimeout不同地方在于setInterval的代码执行周期是无限循环的，意思是每隔time时间代码被加入队列中去，除非你清楚该定时器，否则就一直执行下去。清除该种定时器的方法是clearInterval(timer)，timer是定时器的返回值，使用方法和setTimeout差不多，但推荐使用setTimeout，因为，setInterval会带来一些问题：

（1）如果使用重复setInterval()定时器，然后添加的函数在JS线程中需要执行很长的时间，而重复定时器设定的间隔时间又远远小于该函数执行时间，则在该函数执行期间，该定时器代码会被多次添加到js执行队列等待，这就导致第一次函数执行结束后之后，之前多次添加的函数代码会连续执行而没有间隔。而且又因为第一个函数开始执行需要等主线程空闲才行，所以其第一次的间隔时间也不一定是我们设定的。　　　　（2）鉴于上述问题，js引擎设定了这样一条规则：当使用setInterval()时，仅当js执行队列中没有该定时器的任何其他代码实例时，才能将该定时器代码添加到js执行队列中。否则就是加入失败，重新计时。

然后又带来了其他问题，比如某些间隔会被跳过、多个定时器代码执行之间的间隔可能会比预期的小，实际我们等待间隔大于等于我们设定的间隔时间。

所以在使用setInterval()做动画时要注意两个问题：

1.不能使用固定步长作为做动画，一定要使用百分比: 开始值 + (目标值 - 开始值) * （Date.now() - 开始时间）/ 时间区间2.如果主进程运行时间过长，会出现跳帧的现象（因为js引擎的这条规则而无法添加函数代码）

3.setTimeout递归形成循环执行：

上面讲到setInterval带来了一堆问题，那么当要用到定时器时，我们使用setTimeout的递归形成循环执行代码的效果。

var i=0,    timer=null;function Move(){    i++;    console.log(i);    timer=setTimeout(Move,1000);  //timer=setTimeout('Move()',1000);}

举个简单的小栗子，Move()函数中定时器setTimeout中每隔1000毫秒将move函数加入到队列中去，而move函数中又有定时器setTimeout，一直这样不断持续下去，直到你清除定时器clearTimeout(timer);

4.当定时器要延迟执行的函数带参数时：

无论是window.setTimeout还是window.setInterval，在使用函数名作为调用句柄时都不能带参数，而在许多场合必须要带参数，这就需要想方法解决。经网上查询后整理如下：
例如，对于函数hello(_name)，它用于针对用户名显示欢迎信息：

    var userName="jack";                            //根据用户名显示欢迎信息    function hello(_name){      alert("hello,"+_name);    }

这时，如果企图使用以下语句来使hello函数延迟3秒执行是不可行的：

window.setTimeout(hello(userName),3000);

这将使hello函数立即执行，并将返回值作为调用句柄传递给setTimeout函数，其结果并不是程序需要的。而使用字符串形式可以达到想要的结果：

window.setTimeout(“hello(userName)”,3000);（方法1）

这里的字符串是一段JavaScript代码，其中的userName表示的是变量，而且经测试，这个变量要是个全局的，如果是在某函数里面如此调用 setTimeout，而此变量只是个函数内部变量的话，是会报变量不存在的。

但这种写法不够直观，而且有些场合必须使用函数名，于是有人想到了如下方法2：

<script language="JavaScript" type="text/javascript">    var userName="jack";                                //根据用户名显示欢迎信息    function hello(_name){       alert("hello,"+_name);    }                                //创建一个函数，用于返回一个无参数函数    function _hello(_name){       return function(){             hello(_name);       }    }    window.setTimeout(_hello(userName),3000);</script>

这 里定义了一个函数_hello，用于接收一个参数，并返回一个不带参数的函数，在这个函数内部使用了外部函数的参数，从而对其调用，不需要使用参数。在 window.setTimeout函数中，使用_hello(userName)来返回一个不带参数的函数句柄，从而实现了参数传递的功能。

另外也有人通过修改settimeout、setInterval来实现，相比是比较理想的。即下面的
方法3:

<script language="JavaScript" type="text/javascript">    var userName="jack";                            //根据用户名显示欢迎信息    function hello(_name){       alert("hello,"+_name);    }    //*=============================================================    //*   功能： 修改 window.setInterval ，使之可以传递参数和对象参数        //*   方法： setInterval (回调函数,时间,参数1,,参数n)  参数可为对象:如数组等    //*=============================================================     var __sto = setInterval;         window.setInterval = function(callback,timeout,param){             var args = Array.prototype.slice.call(arguments,2);             var _cb = function(){             callback.apply(null,args);         }         __sto(_cb,timeout);     }window.setInterval(hello,3000,userName);

---

注：后续关于定时器中函数带参数的问题来自百度问答，写的很具体，链接在下：
百度问答链接