JavaScript回调函数

处理回调函数是另一种常见的使用闭包的场景。回调函数指的是需要在将来不确定的某一时刻异步调用的函数。通常，在这种回调函数中，我们经常需要频繁地访问外部数据。

<div id="box1">First Box</div>
<script>
function animateIt(elementId) {
  //在动画函数中，animatelt内部，获取DOM元素的引用
  var elem = document.getElementById(elementId);
  //创建一个计数器用于记录动画执行的次数
  var tick = 0;
  //创建并启动一个JavaScript内置的计时器，传入一个回调函数
  var timer = setInterval(function () {
    //每隔10毫秒调用一次计时器的回调函数，调整元素的位置100次。
    if (tick < 100) {
      elem.style.left = elem.style.top = tick + "px";
      tick++;
    } else {
      clearInterval(timer);
      //执行了100次之后，停止计时器，并验证我们还可以看到与执行动画有关的变量
      if (tick === 100) {
        console.log("Tick accessed via a closure");
      }
      if (elem) {
        console.log("Element also accessed via a closure.");
      }
      if (timer) {
        console.log("Timer reference also obtained via a closure.");
      }
    }
  }, 10);//setInterval函数的持续时间为10毫秒，也就是说回调函数每隔10秒调用一次
}
//全部都设置完成之后，我们可以执行动画函数并查看动画效果
console.log("---------------在interval的回调函数中使用闭包--------------");
animateIt("box1");
</script>

 

 

 

 

特别重要的是，上述代码中使用一个独立的匿名函数来完成目标元素的动画效果，该匿名函数作为计时器的一个参数传入计时器。通过闭包，该匿名函数3个变量控制动画的过程：elem、tick和timer。这3个变量（elem指的是DOM元素的引用，tick指的是计数器和timer指的是计时器的引用），用于维持整个动画的过程，且必须能够在全局作用域内访问到。

但是，如果我们将这些变量从animateIt函数中移出到全局作用域，动画仍然能够正常工作，为什么说不能污染全局作用域呢？

我们如果把这些变量放到全局作用域，然后验证实例是否能够正常运行。现在，如果同时为两个元素设置动画，再添加一个具有唯一ID的元素。在第一个动画调用之后，再将新元素的ID传入animateIt方法进行调用。

问题就很明显了。如果我们把变量放在全局变作用域中，那么需要为每个动画分别设置3个变量，否则同时用3个变量来跟踪多个不同动画的状态，动画的状态就会发生冲突。

通过在函数内部定义变量，并基于闭包是的在计时器的回调函数中可以访问这些变量，每个动画都能够获得属于自己的“气泡”中的私有变量。如果没有闭包，一次性同时做许多事情，例如事件绑定、动画甚至服务端请求等都会变得非常困难。

闭包内的函数不仅可以在创建的时刻访问这些变量，而且当闭包内部的函数执行时，还可以更新这些变量的值。闭包不是在创建的那一时刻的快照，而是一个真实的状态封装，只要闭包存在，就可以对变量进行修改。

 

 

通过在不同的实例中保存变量

1.每个动画都在处理程序的闭包内获得私有变量。

2.该实例无法访问其他闭包内的变量。

 

闭包和作用域是强相关的。

 

参考《JavaScript忍者秘籍》