setTimeout和setInterval区别，以及定时器的传参功能

setTimeout和setInterval都属性Javascript中的定时器，可以规定延迟时间再执行某个操作，不同的是setTimeout在规定时间后执行完某个操作就停止了，而setInterval则可以一直循环下去。

另外,setTimeout和setInterval还能通过扩展运算符形式进行传参；现在IE10及以上版本，其它主流浏览器中，都已支持。

一.setTimeout使用

setTimeout()方法用于指定的毫秒数后调用函数或计算表达式。

1.1 语法：

setTimeout(code, millisec)

1.2 实例：

setTimeout(function(){
  console.log('执行了...')
}, 1000);

1.3 setTimeout循环执行多次：

      由于setTimeout只执行一次，这里在满足条件情况下，运行执行函数即可。

var index = 0;

function callback(){
  //开始计时
  setTimeout(function(){
    //循环执行5次后，结束计时
    if(index<5){
     callback();
    }

    console.log('执行次数', index++);
  }, 3000)
}

callback();

输出结果：

1.4 清除setTimeout计时器

setTimeout计时器虽然只执行一次，但在一些特殊场景下，需在终止即将执行的计时函数，这时则需要用到clearTimeout来。比如Vue开发时，页面在无感刷新情况下，不消除之前定义的执行函数，则会出现重复累加；又或者在满足一定条件后，需要将之前定义好执行函数终止掉。具体如下：

var index = 0,
    handle = null;

function callback(){
  clearTimeout(handle);

  //开始计时
  handle = setTimeout(function(){
    //循环执行5次后，结束计时
    if(index<5){
     callback();
    }

    console.log('执行次数', index++);
  }, 3000)
}

callback();

二、setInterval使用

setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。

2.1 语法

setInterval(code, millisec)

2.2 实例

由于setInterval设定计时周期后，则会一直执行下去，所以在满足特定条件情况下，通过clearInterval来结束计时功能。代码如下：

var index = 0,
    handle = null;

function callback(){
  //循环执行6次后，结束计时
  if(index>=5){
   clearInterval(handle);
  }

  console.log('执行次数', index++);
}

//开始计时
handle = setInterval(callback, 3000)

输出结果：

三、setTimeout和setInterval的传参功能

在setTimeout和setInterval中除了定义执行函数和执行周期（毫秒）外，还可以通过扩展运算符的形式，追加入参数据，这在很多文档中并未涉及到的。

3.1 setTimeout参数

语法：

setTimeout(func, time, ...)

3.2 setInterval参数

语法：

setInterval(func, time, ...)

3.2 案例

//传入参数a和b，计算求和
setTimeout(function(a, b){
  console.log(a + '+' + b + '=' + (a+b));
}, 3000, 5, 10);


//传入参数a和b，计算总和，大于100终止
var total = 0,
    handle = setInterval(function(a, b){
      total += a + b;

      console.log('total:', total);

      if(total>100){
        clearInterval(handle);
      }
    }, 3000, 10, 30);

输出结果：

 3.3 for中添加定时器

由于setTimeout的执行函数运行是，for循环早已结果，故 i 的值已递增为5，所以5个定时器执行出的结果都为5。

//未通过定时器传入参数
for(var i = 0; i < 5; i++){
  setTimeout(function(){
    console.log('value:', i);
  }, 2000*(i+1));
}

输出结果：

//通过定时器会传入参数
for(var i = 0; i < 5; i++){
  setTimeout(function(value){
    console.log('value', value);
  }, 2000*(i+1), i);
}

输出结果：

四、实现原理

在低版本中，无法实现传参功能，可以自定义实现同样效果，代码如下：

var _timeout = setTimeout;
//改写setTimeout定时器
window.setTimeout = function(callback, time){
  //获取除callback和time以外的参数，并以数组形式返回
  var args = Array.prototype.slice.call(arguments, 2);
  //定义新的执行函数
  var _cb = function(){
    callback.apply(null, args);
  }
  //定义setTimeout定时器
  _timeout(_cb, time);
}

//定义计时器
window.setTimeout(function(a, b){
  console.log('a:'+a, 'b:'+b);
}, 1000,  5, 100);

输入结果：