暫停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() { 
 
\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，如果它不是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); 
} 
} 

（初始化this.lastDeletingStatus爲0 TxtType的構造函數）

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

田田!!!!