js中定时器setTimeout和setInterval两种定时器

项目中，经常会用到定时器来实现数据实时更新、时间等，简单总结一下：

Javascript中的定时器有两种，setInterval和setTimeout，而定时器的作用就是延迟执行。

一、定时器的写法

setInterval(expression,milliseconds)；

setTimeout(expression,milliseconds)；

上式中，expression既可以是字符串，也可以是匿名函数，或者也可以是一个函数名。但是，函数名中不能传参。第二个参数为延迟要执行的时间。

具体写法如下：

（1）函数名，不带参数

setInterval(test,1000)；           //1秒后执行

（2）字符串，可以执行的代码

setInterval('test()',1000)；       //1秒后执行

（3）匿名函数

setInterval(function(){},1000)；   //1秒后执行

（4）调用函数

setInterval(test,1000)；           //立即执行

如果想要传参数，可以自己定义一个函数，如下：

function test (str){

   console.log(str);

}

setInterval(test(str),1000)；      //立即执行

注：setTimeout的用法一样

二、定时器的清除

由于定时器在调用时，都会返回一个整形的数字，该数字代表定时器的序号，即第多少个定时器，所以定时器的清除要借助于这个返回的数字。

定时器清除的方法：clearInterval(str)和clearTimeout(str)。

要清除定时器，就必须在用定时器的时候，定义一个变量来记录定时器的返回值。如下：

var str = setInterval(test,1000);

setTimeout的用法也一样。

注：有时候在写的时候，还会习惯将清空的定时器的变量置空，这样写既可以释放内存，也可以便于后边代码的判断。

三、定时器的执行机理

在工作或面试中，经常会遇到将‘定时器和JS的执行机制’结合起来的题。下面简单介绍下：

定时器：延迟执行。

Javascript：单线程执行。

所以，在代码中遇到定时器时，定时器中要执行的代码，都要排在JS执行代码的后面，有如下几种情况：

（1）第一种情况

代码：

打印结果：

（2）第二种情况

代码：

或

打印结果：

（3）第三种情况

代码：

打印结果：

由上述几种情况可以断定，代码执行顺序：先执行完JS主线程代码后，再执行定时器延迟执行的代码。

变量作用域和定时器
 
 
变量提升 
JS的解释器在解释JS代码的时候会首先将代码都扫描一遍，将其中的变量和函数的声明提升到代码块的顶部，所以定义在代码后面的函数在前面代码就可以使用，变量也是如此，但是变量提升的仅仅是变量的声明语句，变量的赋值语句并没有提升，所以提前使用的话只会得到undefined的变量。 
此外，JS中规定循环和条件判断没有语句块，所以在循环和条件判断中声明的变量在此之外还可以继续使用，相当于变量声明在外部。 
以一段代码为例：
console.log(addNum());//这里可以得出，function的作用域是这段代码的范围
console.log(str);//这里可以看出，str的声明也被提升了，但是赋值并没有被提升，所以结果是undefined
var num;
function addNum(){
    num=0;
    for(var i=5;i>0;i--){
        num+=i;
    }
    console.log(i);//这里可以看出，i在for和if之外还可以使用，for和if并没有形成作用域，i的作用域是addNum内
    return num;
}
var str="LI";
  
  
1
2
3
4
5
6
7
8
9
10
11
12
 
 
定时器 
javascript是单线程的语言，所有函数都运行在一个线程中，只有前一个函数运行完了有一个函数才能占用CUP执行，那么在这种情况下看似跑在其他县城上的定时器是如何工作的呢？ 
定时器也是跑在javascript的线程上，也因为此，javascript的定时器并不能准确定时。 
如果当定时器时间到了，但是javascript当前却有函数正在运行，则定时器的回调函数会进行排队，直到当前函数执行完之后才会执行定时器的回调函数。 
细致一点说，定时器分为两种setTimeout和setInterval，一个是定时一次，回调函数执行一次就完了，一个是周期性定时，回调函数会周期性执行。这两种定时器在排队的表现又有不同。 
setTimeout的定时器表现如上所述，而setInterval定时器的表现却有不同，想象一下，如果setInterval的回调函数在第n次执行的时候，第n-1次的回调函数还在排队中没有执行，第n次的回调函数还会进入排队吗？答案是不会，同一个setInterval定时器，javascript不允许队伍有多个同一个setInterval定时器的回调函数进行排队。 
此外，在使用时，setTimeout和setInterval还有一个不同之处，考虑如下代码：
setTimeout(function test(){
    //dosomething
    setTimeout(test,10);
},10);
setInterval(function test(){
    //dosomething
},10);
  
  
1
2
3
4
5
6
7
上述两种代码虽然都实现了周期性执行函数test的功能，但是setTimeout的执行间隔时间和setInterval并不同，setTimeout下一次test函数执行的时间是test内部所有代码执行完毕用时+10ms，而setInterval的执行间隔时间只有10ms，如果test函数的执行时间接近于或者大于10ms的话，setInterval的方法会使test连续执行，甚至引起test函数执行的排队。