停止有限Javascript循环

我似乎无法让下面的代码停止无限循环。我是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>

---

通过检查loopNum是否仍然小于单词数组的长度，可以在最后一个元素之后停止它

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

身体{ 背景色：333； 文本对齐：居中； } *{颜色：fff；文本装饰：无；} var TxtType=函数、旋转、周期{ this.toRotate=toRotate； this.el=el； this.loopNum=0； this.period=parseIntperiod，10 | | 2000； this.txt=； 这是滴答声； this.isDeleting=false； }; TxtType.prototype.tick=函数{ var i=this.loopNum%this.toRotate.length； var fullTxt=this.toRotate[i]； 如果这个是删除{ this.txt=fullTxt.substring0，this.txt.length-1； }否则{ this.txt=fullTxt.substring0，this.txt.length+1； } this.el.innerHTML=+this.txt+； var=这个； var delta=200-数学随机*100； 如果this.isDeleting{delta/=2；} 如果！this.isDeleting&&this.txt===fullTxt{ delta=这个周期； this.isDeleting=true； }否则，如果this.isDeleting&&this.txt=={ this.isDeleting=false； 这个.loopNum++； δ=500； } 如果this.loopNum对于var i=0；i您可以在打印出最后一个字符串后，在方向改变的检查处直接停止循环

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=函数、旋转、周期{ this.toRotate=toRotate； this.el=el； this.loopNum=0； this.period=parseIntperiod，10 | | 2000； this.txt=； 这是滴答声； this.isDeleting=false； }; TxtType.prototype.tick=函数{ var i=this.loopNum%this.toRotate.length； var fullTxt=this.toRotate[i]； 如果这个是删除{ this.txt=fullTxt.substring0，this.txt.length-1； }否则{ this.txt=fullTxt.substring0，this.txt.length+1； } this.el.innerHTML=+this.txt+； var=这个； var delta=200-数学随机*100； 如果这个是删除{ delta/=2； } 如果！this.isDeleting&&this.txt===fullTxt{ delta=这个周期； this.isDeleting=true； 如果this.loopNum+1==this.toRotate.length{//添加此项以停止 回来 } }否则，如果this.isDeleting&&this.txt=={ this.isDeleting=false； 这个.loopNum++； δ=500； } setTimeoutfunction{ 那就是滴答声； }，三角洲； }; window.onload=函数{ var elements=document.getElementsByClassName'typewrite'； 对于变量i=0；i.wrap{右边框：0.08em实心fff}； document.body.appendChildcss； }; 正文{背景色：333；文本对齐：居中；} *{颜色：fff；文本装饰：无；}

---

您的问题被代码重载。请阅读并使用此网站以获得更好的结果。