时间戳

首页 > 解决方案 > 为什么最后一个字符不断重复打印？

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

问题描述

我编写了以下内容来为 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>

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

如果有人能告诉我上面代码中的错误，我会很高兴听到它。

这是我尝试此代码的小提琴的链接。

提前致谢。

标签： javascriptjqueryhtml

解决方案

当涉及到闭包时，你偶然发现了一些学习。当i循环并最终在函数内部运行时，它只查看最后一个字符，因为这是在第一个实际触发i之前被覆盖的内容。animate()

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

有关关闭的更多信息，请查看：什么是“关闭”？

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语法，它定义i了块的范围（这实际上在您的 if 块周围创建了一个闭包。）

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>

推荐阅读