停止Inifinite Javascript循環

Question

我似乎無法得到以下代碼來阻止循環無限。我對JS相當陌生，在codepen上發現了這一點。對於我正在開發的項目來說，這將非常有用，但前提是我可以無限期地停止循環。在輸入最後一個短語之後停止它將是理想的。思考？

<style> 
    body { 
     background-color:#333; 
     text-align: center; 
    } 
    * { color:#fff; text-decoration: none;} 
</style> 
<script> 
    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); 
    }; 
</script> 

    <h1> 
    <a href="" class="typewrite" data-period="2000" data-type='[ "Discover", "Learn", "Train", "Prepare", "Share" ]'> 
     <span class="wrap"></span> 
    </a> 
</h1> 

Answer 1

你可以打印出最後一個字符串後直接停止循環，在辦理入住手續，那裏的方向變化。

if (!this.isDeleting && this.txt === fullTxt) { 
    delta = this.period; 
    this.isDeleting = true; 
    if (this.loopNum + 1 === this.toRotate.length) { // add this to stop 
     return; 
    } 

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; 
 
    if (this.loopNum + 1 === this.toRotate.length) { // add this to stop 
 
     return; 
 
    } 
 
    } 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: #333; text-align: center; } 
 
* { color: #fff; text-decoration: none; }

<h1> 
 
    <a href="" class="typewrite" data-period="2000" data-type='["Discover", "Learn", "Train", "Prepare", "Share"]'> 
 
    <span class="wrap"></span> 
 
    </a> 
 
</h1>

Answer 2

您可以通過檢查，看是否loopNum仍低於字的數組的長度的最後一個元素之後停止。

if(this.loopNum < this.toRotate.length){ 
    setTimeout(function() { 
     that.tick(); 
    }, delta); 
} 

<style> 
 
    body { 
 
     background-color:#333; 
 
     text-align: center; 
 
    } 
 
    * { color:#fff; text-decoration: none;} 
 
</style> 
 
<script> 
 
    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; 
 
     } 
 
     
 
     if(this.loopNum < this.toRotate.length){ 
 
      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); 
 
    }; 
 
</script> 
 

 
    <h1> 
 
    <a href="" class="typewrite" data-period="2000" data-type='[ "Discover", "Learn", "Train", "Prepare", "Share" ]'> 
 
     <span class="wrap"></span> 
 
    </a> 
 
</h1>