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

时间:2015-09-08 07:58:46

标签: javascript jquery html callback settimeout

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

我必须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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

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

我做了什么:

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

    &#13;
    &#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;
    &#13;
    &#13;