javascript - 暂停JS打字机

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

最佳答案

 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不应为布尔值。它应该能够容纳三个值。 isDeleting = 0，isDeleting = 1，isDeleting = 2（这是停止状态）。

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

要实现此目的，请执行以下操作：

1）创建一个名为txtType的全局变量。在window.onload中，将其设置为新的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的原型上创建一个名为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">

多田!!!