第一个完成后运行功能

Question

我需要h5中的文字在h1中的整个文本完成后开始出现。 我需要一个函数计算时间来结束第一个函数来延迟它还是有更简单的方法？可以用一个typeWriter（）函数来完成吗？

＆＃13;

＆＃13;

$(document).ready(function () {
	var text = $('.test').data('text');
  var text2 = $('.test2').data('text');
  
  function typeWriter(text, n) {
  if (n < (text.length)) {
    $('.test').html(text.substring(0, n+1));
    n++;
    setTimeout(function() {
      typeWriter(text, n)
    }, 100);
  }
}

function typeWriter2(text, n) {
  if (n < (text.length)) {
    $('.test2').html(text.substring(0, n+1));
    n++;
    setTimeout(function() {
      typeWriter2(text, n)
    }, 100);
  }
}


function process(callback){
	typeWriter(text, 0);
  callback(text2, 0);
}
process(typeWriter2);

  
  
  
  
});

＆＃13;

<div class="wrap">
  <h1 class="test" data-text="Augue ac adipiscing quis"></h1>
  <h5 class="test2" data-text="arcu auctor! Elementum."></h5>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过传递一大堆选项来使方法更灵活。然后按顺序执行两个操作，提供一个回调函数，并在完成时再次使用它来调用该函数。

＆＃13;

＆＃13;

$(document).ready(function () {
	var text = $('.test').data('text');
  var text2 = $('.test2').data('text');

  function typeWriter3(options, cb) {
      if (options.index < options.text.length) {
          $(options.selector).text(options.text.substr(0, options.index+1));
          options.index++;
          setTimeout(function() {
              typeWriter3(options, cb);
          }, 100);
      } else if (typeof(cb) === 'function') {
          cb();
      }
  }

  typeWriter3({
      index: 0,
      text: text,
      selector: '.test'
  }, function() {
      typeWriter3({
          index: 0,
          text: text2,
          selector: '.test2'
      });
  });
});

＆＃13;

<div class="wrap">
  <h1 class="test" data-text="Augue ac adipiscing quis"></h1>
  <h5 class="test2" data-text="arcu auctor! Elementum."></h5>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;