很多面试者在面试中总会遇到这样的一道面试题：

function fn(){ for(var i=0;i<5;i++){ setTimeout(function(){ console.log(i); },2000) }}fn();

问题是：上面这段代码的输出？

答案大部分人都能答出来：输出为5个5。

从这个面试题可以延伸处很多的js知识点。事件队列，定时器，回调函数，块级作用域，闭包等等吧。我们就先谈谈闭包吧。从我们的输出可以看出来。上面代码中定时器的5个回调函数拥有相同的函数作用域。

我们再看看下面的代码：

<style> #first{ width:50px; height:50px; background: red; position: absolute; } #second{ width:50px; height:50px; background: yellow; position: absolute; } </style><div id='first'> first </div> <div id='second'> two </div>function animateFn(ele,x) { let count = 0; let timer = setInterval(function () { if (count < 1000) {	console.log(count) count += x; ele.style.top = ele.style.left = count + 'px' }else{ clearInterval(timer); } }, 100)}let first = document.getElementById('first');animateFn(first,1);let second = document.getElementById('second');animateFn(second,2);

我们定义了2个div元素，分别为first和second。定义动画函数animateFn。然后把div元素first和second作为参数传给animateFn。我们让first元素以每100ms 增加top和left 1px的速度移动，让second元素以每100ms 增加top和left 2px的速度移动。当移动的距离超过1000时，清除定时器。

我们很容易想到second比first的移动速度要快，先清除定时器任务。代码的运行结果也正如我们所料。

这段代码和第一个例子的代码类似，我们都用定时器执行一个回调函数，这个回调函数拥有变量对外部变量的访问权，但是第二个例子让我们不仅仅可以访问外部的变量，还可以对这个变量进行修改（这一点也是非常有用的）。

另外因为我们对animateFn调用了2次，所以在window环境下形成了animateFn的执行环境，所以这两个作用域是相互隔离的，互不影响，闭包回调函数对外部变量的访问也是独立的，互不影响。