javascript - 难以掌握 JavaScript 闭包(即，为什么这个 for 循环不起作用？)

Question

Possible Duplicate:
How do JavaScript closures work?

我搜索了常见问题解答并看到了示例，但我似乎无法理解为什么这不起作用。我真的很感激任何关于我做错了什么的提示。 我想做的就是取一个单词，然后单击按钮，为每个字母一次显示一个图像，拼写出该单词(并且图像应该淡入/淡出)。 这是经典的“for 循环仅显示最后一项”问题，但问题是，控制台记录正确。变量发生变化，但仅显示最后一个图像。我再次真诚地感谢任何帮助理解我做错了什么的帮助，因为我知道完全理解这一点很重要。下面的代码(我省略了 HTML，因为它只是一个更新的 div 和一个按钮):

$(document).ready(function () {
  var word = 'abc';

  $('#newWordButton').click(function () {
    function animateLetters() {
      function changeLetter() {
        for (i = 0; i < word.length; i++) {
          var currentLetter = word.charAt(i);
          console.log(currentLetter);
          $('#wordsDiv').fadeOut(1000, function () {
            $('#wordsDiv').replaceWith('<img src = "images/letters/' + currentLetter + '.gif" />');
            $('#wordsDiv').fadeIn(1000);
          });
        }
      }
      setTimeout(changeLetter, 1000);
    }

    animateLetters();
  });
});

Answer 1

您需要通过将值作为参数传递给自执行函数来使 currentLetter 成为一个闭包。当您的函数执行时，这将为您保留该值。

未经测试的示例:

for (i = 0; i < word.length; i++) {
    (function (currentLetter) {
        console.log(currentLetter);
        $('#wordsDiv').fadeOut(1000, function () {
            $('#wordsDiv').replaceWith('<img src = "images/letters/' + currentLetter + '.gif" />');
            $('#wordsDiv').fadeIn(1000);
        });
    )(word.charAt(i));
}