javascript - 暂停 JS 打字机

Question

我在 Codepen 上使用了一个模拟字体效果的脚本。 http://codepen.io/hi-im-si/pen/DHoup .

尝试创建一个简单的开始/停止按钮。我已经添加了暂停 svg 按钮和类，但不太确定如何让它暂停。

感谢您的帮助!

这是脚本:

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');
            if (toRotate) {
              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);
    };

body {
  background-color:#ce3635;
  text-align: center;
  color:#fff;
  padding-top:10em;
  font-family:Helvetica;
}

* { color:#fff; text-decoration: none;}

<div class="type-wrap">
<h2>
  <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, My name is Justin.", "I am Creative.", "I Love Design.", "I Love to Develop." ]'>
    <span class="wrap"></span></a>
</h2>
  
</div>
  
  <div class="controls">
   <a href="#" class="stop-start-btn"><span class="icon-pause"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 24 24"><g  transform="translate(0, 0)">
<line data-color="color-2" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="9" y1="16" x2="9" y2="8" stroke-linejoin="miter"/>
<line data-color="color-2" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="15" y1="16" x2="15" y2="8" stroke-linejoin="miter"/>
<circle fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" cx="12" cy="12" r="11" stroke-linejoin="miter"/>
</g></svg></span></a>
  
  
  </div>

Answer 1

 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.lastDeletingStatus=0;
    this.isDeleting = 0;
};
var timer;
TxtType.prototype.tick = function() {
    var i = this.loopNum % this.toRotate.length;
    var fullTxt = this.toRotate[i];

    if (this.isDeleting===1) {
        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===1) { delta /= 2; }

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

    if(this.isDeleting!==2){
    timer=setTimeout(function() {
	    that.tick();
        }, delta);
    }
};

TxtType.prototype.toggleStart=function(){
//start back up 
    if(this.isDeleting===2){
        this.isDeleting=this.lastDeletingStatus;
        this.lastDeletingStatus=2;
 }
//stop
else{
    this.lastDeletingStatus=this.isDeleting;
    this.isDeleting=2;
    clearTimeout(timer);
}
}
    var toggleStart=function(){
       txtType.toggleStart();
        txtType.tick();
    }
	var txtType;

    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) {
		txtType=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);
    };

body {
    background-color:#ce3635;
    text-align: center;
     color:#fff;
     padding-top:10em;
     font-family:Helvetica;
 }

* { color:#fff; text-decoration: none;}

<div class="type-wrap">
<h2>
  <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, My name is Justin.", "I am Creative.", "I Love Design.", "I Love to Develop." ]'>
    <span class="wrap"></span></a>
</h2>
  
</div>
  
  <div class="controls">
     <a href="#" class="stop-start-btn"><span class="icon-pause" ><svg onclick="toggleStart()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 24 24"><g  transform="translate(0, 0)">
<line data-color="color-2" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="9" y1="16" x2="9" y2="8" stroke-linejoin="miter"/>
<line data-color="color-2" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="15" y1="16" x2="15" y2="8" stroke-linejoin="miter"/>
<circle fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" cx="12" cy="12" r="11" stroke-linejoin="miter"/>
</g></svg></span></a>
  
  
  </div>

isDeleting 不应该是 bool 值。它应该能够保存三个值。 isDeleting=0, isDeleting=1, isDeleting=2(即停止状态)。

然后创建一个函数 TxtType.prototype.toggleStart，如果它不是 2，则将 this.isDeleting 设置为 2，如果是 2，则将其设置为 this.isDeleting 之前的值。

要实现这一点，请执行以下操作:

1) 创建一个名为 txtType 的全局变量。在 window.onload 中，将其设置为等于 new TxtType(...)。这样，您就可以从其他函数访问该对象。它看起来像这样:

var txtType;

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) {
    txtType=new TxtType(elements[i], JSON.parse(toRotate), period);
        }
     }
  ...
};

2) 创建一个全局计时器变量，您将其设置为等于 tick() 中的超时调用。这样，您就可以从其他函数中清除定时器。这看起来像这样:

var timer;
TxtType.prototype.tick = function() {
    ......
timer=setTimeout(function() {
        that.tick();
        }, delta);
}

3)凡isDeleting=false，设置isDeleting=0。当 isDeleting=true 时，设置 isDeleting=1。在 setTimeout() 周围放置一个 if 语句，以便它仅在 isDeleting!==2 时运行(即它不处于停止状态。如果它处于停止状态，我们不希望此计时器运行)。

4)在TxtType原型(prototype)上创建一个名为toggleStart的函数如下:

TxtType.prototype.toggleStart=function(){
//start back up 
    if(this.isDeleting===2){
        this.isDeleting=this.lastDeletingStatus;
        this.lastDeletingStatus=2;
 }
//stop
else{
    this.lastDeletingStatus=this.isDeleting;
    this.isDeleting=2;
    clearTimeout(timer);
}
}

(在TxtType的构造函数中将this.lastDeletingStatus初始化为0)

5) 创建一个名为 toggleStart 的全局函数，您可以按如下方式从 html 调用它:

  var toggleStart=function(){
       txtType.toggleStart();
        txtType.tick();
    }

6) 最后一步，在你的 html 中添加暂停 svg 中的 onclick="toggleStart()"，如下所示:

<svg onclick="toggleStart()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 24 24">

多田!!!!