js定时功能的介绍

概述

在js动画中我们经常用到定时器这种工具，它也确实很好用。
其中js内置的setInterval()与setTimeout()函数提供了定时的功能，前者是每隔几秒执行一次，后者是延迟一段时间执行一次。此外，javascript内置的clearInterval()函数用于取消定时器功能。

setInterval()函数

setInterval()函数可按照指定的周期（以毫秒计）来调用函数或计算表达式。它可以无限执行下去，也可以通过clearInterval()函数清除掉 。

//它的基本语法如下：
var timer= setInterval(code, delay);
//其中code是执行的代码，它可以是一个function执行函数，delay是指定的周期，以毫秒计，每过多少毫秒执行一次前面的代码。

举个例子

var fn=function(){  
    console.log("fn()函数被执行了");  
}   
setInterval(fn,1000);//每隔1min控制台输出一次 

setTimeout()函数

setTimeout()在指定的延迟时间之后调用一个函数或者执行一个代码片段，使用clearTimeout()函数可取消由 setTimeout() 方法设置的延迟调用。

//它的基本语法跟setInterval()差不多：
var timer= setTimeout()(code, delay);
//其中code是执行的代码，它可以是一个function执行函数，delay是代码执行延迟的时间，也是以毫秒计。

举个例子

setTimeout(function() {  
console.log(1);  
}, 1000); //延迟1min后在控制台输出1；

再比如：

setTimeout(function() {  
console.log(1);  
}, 0);  
console.log(2);  
//执行结果是：先输出2，再输出1。  

使用setTimeout()函数优化setInterval()函数的方案

一般不用setInterval()函数，而用setTimeout()函数的延时递归来代替setInterval()函数。setInterval()函数会产生回调堆积，特别是时间很短的时候。
方案一：

var timeout = false; //启动及关闭按钮    
function time() {  
    if(timeout) return;  
    console.log(1);  
    setTimeout(time,1000);  
}  
time();  

方案二：

var fn=function(){  
console.log(1);  
setTimeout(fn, 1000)  
}  
fn();  

最后说一下clearInterval()函数和 clearTimeout()函数的语法。这个很简单，只要将前面的定时器赋予一个变量，然后在clearInterval()函数或 clearTimeout()函数小括号中写上这个变量名就可以清除定时器了。
以上就是我对定时器的一些简单想法，希望大家能够喜欢。