实现两段打字机文本效果：第二段延迟启动的解决方案

嘿，这个需求很好实现！我们只需要给第二段文本的打字机初始化逻辑加上延迟即可，这里有两种灵活的方案供你选择：

方案一：使用自定义data-delay属性（推荐） #

这种方式更灵活，以后要调整延迟时间或者给更多元素加延迟都很方便。

修改HTML代码 #

给第二个.typewrite元素添加data-delay属性，值为你想要的延迟毫秒数（比如5000=5秒，10000=10秒）：

<h1>
  <div class="typewrite" data-period="2000" data-type='[ "Hi, Im John Doe." ]'>
    <span class="wrap"></span>
  </div>
</h1>
<h1>
  <div class="typewrite" data-period="2000" data-type='[ "I Love to Develop." ]' data-delay="5000">
    <span class="wrap"></span>
  </div>
</h1>

修改JavaScript代码 #

在初始化元素的循环里，读取data-delay属性，有值的话就用setTimeout延迟初始化：

var TxtType = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtType.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

  var that = this;
  var delta = 200 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-type');
    var period = elements[i].getAttribute('data-period');
    var delay = elements[i].getAttribute('data-delay'); // 获取延迟时间

    if (toRotate) {
      // 处理延迟逻辑，用闭包保存当前元素的状态
      if (delay) {
        setTimeout(function(el, rotate, p) {
          return function() {
            new TxtType(el, JSON.parse(rotate), p);
          };
        }(elements[i], toRotate, period), parseInt(delay, 10));
      } else {
        new TxtType(elements[i], JSON.parse(toRotate), period);
      }
    }
  }

  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
  document.body.appendChild(css);
};

方案二：直接通过索引判断延迟 #

如果你只需要给第二个元素固定延迟，可以直接在循环里判断索引：

window.onload = function() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-type');
    var period = elements[i].getAttribute('data-period');

    if (toRotate) {
      if (i === 1) { // 第二个元素（索引从0开始）
        setTimeout(function() {
          new TxtType(elements[i], JSON.parse(toRotate), period);
        }, 5000); // 延迟5秒
      } else {
        new TxtType(elements[i], JSON.parse(toRotate), period);
      }
    }
  }

  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
  document.body.appendChild(css);
};

两种方案都能实现你的需求，方案一的扩展性更好，推荐使用~

内容的提问来源于stack exchange，提问作者Animesh Biswas