js中setTimeout和setInterval的用法与区别

博客

一，前言

setTimeout和setInterval在js中常被称为定时器，用它们可以实现动画效果。它们功能相似，都可以用来实现在一个固定时间段之后去执行JavaScript代码，但又有所区别。下面我们来讨论一下二者的具体用法与区别。

二，共同点

它们通常有2个参数，第一个参数是要调用的函数，一般是函数名、匿名函数、函数的引用以及其他可执行代码；第二个参数是在执行函数前需等待的毫秒数。例如下面的形式：

• setTimeout(functionName(),1000)//1秒后执行该函数
• setInterval(functionName,1000)//每隔1秒执行一次该函数

后来发现它们的第一个参数带不带括号，带不带引号，都会影响到结果的输出。后面再详细讨论

三，区别

其实通过上面的参数含义解释大家就应该看出它们最大的区别是，setTimeout一般只能执行一次，不过可以在函数里再次调用setTimeout实现循环执行该函数的功能。而setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

3.1 setTimeout

上面说了，通常的写法只能通过事件绑定让setTimeout执行一次函数，要实现循环多次执行就要自身调用了，这样就不用绑定在on-off的动作上了。看一下代码：
代码1

3.2 setInterval

setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，不受函数执行时间的影响

3.3 setTimeout受函数执行时间的影响

setTimeout方法不会每隔5秒钟就执行一次showTime函数，它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完，那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。

所以如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout。

四，关闭定时器

如果对计时函数不加以处理，那么setInterval将会持续执行相同的代码，一直到浏览器窗口关闭，或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。

当setInterval调用执行完毕时，它将返回一个timer ID，将来便可以利用该值对计时器进行访问，如果将该ID传递给clearInterval，便可以终止那段被调用的过程代码的执行了。如果将setInterval绑定到诸如onclick这样的事件上时，如果用户重复点击同一个对象，就会加速函数的执行，间隔时间就不再是我们设定的那个时间了，这时只要在setInteval之前关闭所有的定时器就OK了。具体实现如下：

时间暂停代码

关闭setTimeout函数也一样，用相应的clearTimeout(timer)，timer是setTimeout的ID。

五，关于setInterval第一个的参数那些坑

我习惯用匿名函数作为定时器的第一个参数，从来没有出错，今天写博客时试了用函数名作为参数，发现有很多bug，来看一下代码。
参数代码
这部分参照了http://www.softwhy.com/forum.php?mod=viewthread&tid=6940
上面讲的比较详细，大家可以去看看。如果嫌麻烦，也可以像我一样用匿名函数作为参数。

六，后记

今天写这篇博客找了好多资料，越研究发现以前对定时器的认识太浅显，发现自己很多都没搞清楚，特别是参数那部分，还要好好研究。以后坚持每周写一篇博文，与大家共勉。