JavaScript 闭包问题请解释

Question

这是一个取自 Pro JavaScript 技术的函数，我试图理解，但没有理解。该功能的目的是通过在一秒钟内增加其高度来慢慢显示隐藏的元素。代码中的注释由本书作者提供。从作者在评论中所说的“关闭以确保我们拥有正确的‘i’”开始，我不明白任何事情。

能否请您尽可能详细地解释一下

a) 这个闭包在这个函数中是如何工作的。 IE。它如何确保它具有正确的“i”以及代码中的哪些内容使其如此重要。

b) 为什么代码 elem,.style.height

c) 这部分代码的目的是什么 (pos + 1) * 10)。它如何与 setTimeout 函数一起使用？

function slideDown(elem) {
  //start the slide down at 0
  elem.style.height = '0px';

    //Show the element, but can`t see it because height is 0
   show(elem);

    //find the full potential height of the element
    var h = fullHeight(elem);

   //We`re going to do a 20 frame animation that takes place over one second
   for (var i = 0; i <= 100; i +=5 ) {
         //a closure to make sure that we have the right 'i'
         (function() {
           var pos = i;

          //set the timeout to occur at the specified time in the future
          setTimeout(function() {

            //set the new height of the element
             elem,.style.height = (pos/100) * h) + "px";

         }, ( pos + 1) * 10);
       })();
     }
}

Answer 1

a) 这是必不可少的，因为 setTimeout()称呼。自 setTimeout()从逻辑上讲，它是一个休眠线程，它可以在下一次循环迭代后调用，i到 setTimeout() 的主体时可能是不同的值被调用。 “拯救” i作为pos修复了这个潜在的问题，并保护了 i 的值(value)以防它同时发生变化。现在，pos 的值完全由高级确定，不受主线程(递增的循环 i )的影响。

b) 不知道，看起来像是打字错误。 编辑: 是的，这是一个错字。给你。

c) 它确保了 setTimeout 的正文在未来某个时间被调用，与 i 的值成比例.想一想；如果每个电话都是setTimeout(..., 10) ，然后一切都将在 10 毫秒内开始，但仍以循环执行的任何速度执行。添加pos作为这个值的一个因素“减慢” future 的执行setTimeout电话。如评论中所述，它确保 future setTimeout()调用以每秒 20 次的速度发生(创建 20FPS 动画效果)