javascript - 多个 $.each 中的 setTimeout() 回调

Question

我知道有很多示例，但在我的示例中我不明白该怎么做。

我必须使用 setTimeout() 函数，并且我需要在第一次结束时运行第二个 timeout。

Demo

var title = $(".form-title").attr("data-title");
var fname = $(".form-name").attr("data-name");

$.each(title.split(''), function(i, letter) {
  setTimeout(function() {
    $('.form-title').html($('.form-title').html() + letter);
  }, 100 * i);
});

$.each(fname.split(''), function(i, letter) {
  setTimeout(function() {
    $('.form-name label:nth-of-type(1)').html($('.form-name label:nth-of-type(1)').html() + letter);
  }, 100 * i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h2 class="form-title" data-title="Dear Concept Studio,"></h2>
<p class="form-name" data-name="Hello, I'm">
  <label></label>
</p>

Answer 1

你没有。但是您可以使用 counter 在计数器到达最后一个元素时调用该函数。

我做了什么:

1. 创建了一个计数器变量
2. 移动代码以在另一个单独的函数中显示第二个字符串的动画
3. 在添加每个字符后增加计数器
4. 检查 counter 是否等于字符串的 length，如果是则调用为第二个字符串设置动画的函数。

Demo

var title = $(".form-title").attr("data-title");
var fname = $(".form-name").attr("data-name");

var counter = 0;
$.each(title.split(''), function(i, letter) {
  setTimeout(function() {
    $('.form-title').html($('.form-title').html() + letter);

    ++counter === title.length && animateSecond();
  }, 100 * i);
});

function animateSecond() {
  $.each(fname.split(''), function(i, letter) {
    setTimeout(function() {
      $('.form-name label:nth-of-type(1)').html($('.form-name label:nth-of-type(1)').html() + letter);
    }, 100 * i);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h2 class="form-title" data-title="Dear Concept Studio,"></h2>

<p class="form-name" data-name="Hello, I'm TJ. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, corporis, omnis? Maiores alias expedita, quis, aliquam, assumenda deserunt molestias maxime non, natus cupiditate illo harum. Amet autem inventore quis adipisci!">
  <label></label>
</p>