Pausing JS Typewriter

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() { 
 
\t  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(); 
 
    } 
 
\t 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) { 
 
\t \t 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, которая устанавливает 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) Создать глобальную переменную таймера, который вы установили равным вызова тайм-аута в клеща(). Таким образом, вы можете очистить таймер от других функций. Это будет выглядеть примерно так:

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

3) Где isDeleting = ложно, установите isDeleting = 0. Всякий раз, когда isDeleting = true, задайте isDeleting = 1. Положите оператор if вокруг setTimeout(), чтобы он выполнялся только, если 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); 
} 
} 

(Initialize this.lastDeletingStatus 0 в конструкторе TxtType)

5) Создать глобальную функцию под названием toggleStart, что вы можете позвонить из HTML следующим образом:

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

6) Последний шаг, добавить OnClick = "toggleStart()" от паузы ГСВ в вашем HTML, как это:

<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"> 

Tada !!!!