javascript - 为什么最后一个字符不断重复打印？

Question

我已经编写了以下代码来为 div 中的文本设置动画，但我找不到最后一个字符是如何重复打印的。

var textClass = $(".first-text");
var text = textClass.text();
textClass.text("");
for (var i in text) {
  $(textClass).animate({
    opacity: 0.25
  }, 200, function() {
    $(textClass).append(text.charAt(i));
  });
}

p:not(:first-child) {
  display: none;
}

p {
  margin: 0 auto;
  font-size: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate-text">
  <p class="first-text">HTML</p><br>
</div>

如果我尝试提醒 i 或 text.charAt(i) 的值，我总能得到所需的输出，但是当我尝试附加相同的内容时在 div 中，我总是得到重复打印的最后一个字母。我找不到我错了的地方。我找不到逻辑中的错误。

如果有人能指出我在上述代码中的错误，我将很高兴听到。

Here是我尝试此代码的 fiddle 的链接。

提前致谢。

Answer 1

当涉及到闭包时，您已经无意中学习了一些东西。当 i 循环并最终在函数内部运行时，它只会查看最后一个字符，因为这是在第一个 animate( ) 实际上会触发。

您可以通过自己手动创建一个闭包来抵消这种情况，将其包装在一个函数中并将其传入，以在循环时保留变量。

有关关闭的更多信息，请查看:What is a 'Closure'?

var textClass = $(".first-text");
var text = textClass.text();
textClass.text("");
for (var i in text) {
  (function (char) {
    $(textClass).animate({
      opacity: 0.25
    }, 200, function() {
      $(textClass).append(text.charAt(char));
    });
  })(i)
}

p:not(:first-child) {
  display: none;
}

p {
  margin: 0 auto;
  font-size: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate-text">
  <p class="first-text">HTML</p><br>
</div>

或者，您可以使用新的 let或 const语法，它为 block 的范围定义了 i(这实际上在您的 if block 周围创建了一个闭包。)

var textClass = $(".first-text");
var text = textClass.text();
textClass.text("");
for (const i in text) {
  $(textClass).animate({
    opacity: 0.25
  }, 200, function() {
    $(textClass).append(text.charAt(i));
  });
}

p:not(:first-child) {
  display: none;
}

p {
  margin: 0 auto;
  font-size: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate-text">
  <p class="first-text">HTML</p><br>
</div>