Question

我知道有很多例子，但在我的例子中，我不明白这是怎么做的。

我必须setTimeout()功能，我需要在第一次结束时运行第二个timeout。

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

Answer 1

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

我做了什么：

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

Demo

＆＃13;

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);
  });
}

＆＃13;

<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>

＆＃13;

多个$ .each中的setTimeout（）回调

1 个答案: