浅谈setTimeout与setInterval定时器

1.setTimeout()

setTimeout函数，我将其称之为延时器，顾名思义就是，多少秒之后执行某个函数或代码段，只执行一次。

例1.在2秒之后执行代码段：console.log(2)

setTimeout('console.log(2)',2000);

例2.在1秒之后执行函数func

setTimeout(function(){
  for(var i=0;i<10;i++){
  console.log(i++);
  }
},1000)

2.setInterval()

setInterval函数，多少秒之后执行某个函数或代码段，并无限次定时执行。

例3

setInterval(function(){
  var d=new Date();
  console.log(d.getHours()+':'+d.getMinutes()+':'+d.getSeconds());
},1000)

3.clearTimeout() , clearInterval()

setTimeout和setInterval函数，会返回一个整数值，用来表示定时器的编号，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。

例4

  function f(){
  console.log(2);
}
var delayer=setTimeout(f,5000);
var timer=setInterval(f,1000);
clearTimeout(delayer);
clearInterval(timer);

4.用setTimeout()实现setInterval()

function f(){
    setTimeout(function(){
        var d=new Date();
        console.log(d.getMinutes()+':'+d.getSeconds());
        f();
    },1000);
}
f();

虽然setTimeout()实现了setInterval(),但是两者有区别。

时间： 1------2------ 3------4------5
setTimeout ：1...------2...------3...------4...------5
setInterval： 1...---2...---3...---4...---5
注： ------表示一秒的时间间隔
...------表示函数或代码段执行的时间加一秒的时间间隔，即总时超过一秒
...---表示函数或代码段执行的时间加一秒剩余的时间，即总时共加起来等于一秒

二者实现过程及结果对比

//用于耗时，在本机的执行时间大概0.5秒
function usetime(){
    for(var i=0;i<500;i++){
        console.log('');
    }
}
//setInterval()函数
var k=0;
setInterval(function(){
    usetime();
    console.log('setInterval'+k++);
},1000);
//setTimeout()实现setInterval()函数
var j=0;
function timer(){
    setTimeout(function(){
        usetime();
    console.log('setTimeout'+j++);
    timer();
 },1000);
}
timer();

从两者结果对比发现，相同时间内setInterval执行次数比setTimeout执行的次数要多。

两者实现结果对比.png

在setInterval中，如果函数或代码段执行的时间大于设置的间隔时间，则执行的模式为：

时间: 1------2------3------4------5
setInterval：1..........2..........3..........4..........5
即，函数或代码段在执行完成后又立即执行下一次

var i=1;
setInterval(function(){
  alert(i++);
},2000);

5.setTimeout(f,0)

将定时器内f代码的执行放到队尾去

var a=1;
setTimeout(function(){
    console.log('before'+a);
    a=2;
    console.log('after'+a);
},0);
a=3;
console.log(a);