一段有趣的代码，关于循环内的异步栈以及变量声明

一段有趣的代码，关于循环内的异步栈以及变量声明

function fn1(){
  for(var i=0;i<4;i++){
    var tc=setTimeout(function(i){
      console.log(i);
      clearTimeout(tc)
    },10,i);
  }
}

function fn2(){
  for(var i=0;i<4;i++){
    var tc=setInterval(function(i,tc){
      console.log(i);
      clearInterval(tc)
    },10,i,tc);
  }
}

fn1();
fn2();

fn1 异步栈

循环内会先执行完毕，clearTimeout 中 tc的值永远是最后一个 setTimeout 的 timerId。 因此只是清除了 i = 3 时的定时器。

输出： 0 1 2

fn2 变量定义

先定义tc，再传值。代码可拆分为

var tc;
tc = setInterval(function() {
  console.log(i);
  clearInterval(tc)
}, 10, i, tc)

因此，第一次传入的 tc 值并不是 0 而是 undefined，clearIterval 实际上清除的是上一个定时器，而最后一个定时器永远无法清除。

输出 0 1 2 3 3 3 3 3..........