如何在循环中永远进行Javascript打字效果？

Question

我得到这个文本输入动画效果代码，键入一个代码，它完美地工作，但是，我希望它结束​​时永远循环3秒延迟。动画和一切都保持不变。我只是不希望它结束​​，因为我在项目页面的侧面显示。

我该怎么做？

这是一个有效的JSFiddle：https://jsfiddle.net/gsv0807f/

HTML

<pre id="typewriter">
<span class="var-highlight">var</span> object = {
    name: <span class="string-highlight">'Foo'</span>,
    type: <span class="string-highlight">'Bar'</span>,
    location: <span class="string-highlight">'Earth'</span>,
    properties:[<span class="string-highlight">'Javascript'</span>,
                <span class="string-highlight">'HTML'</span>,
                <span class="string-highlight">'CSS'</span>];
}; </pre>

CSS

.var-highlight {
  color: #c0ad60;
}
.string-highlight {
  color: rgba(253, 149, 90, 0.8);
}
#typewriter {
  font-size: 2em;
  margin: 0;
  font-family: "Courier New";
}
#typewriter:after {
  content: "|";
  -webkit-animation: blink 500ms linear infinite alternate;
          animation: blink 500ms linear infinite alternate;
}
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

JS

function setupTypewriter(t) {
    var HTML = t.innerHTML;
    t.innerHTML = "";
    var cursorPosition = 0,
        tag = "",
        writingTag = false,
        tagOpen = false,
        typeSpeed = 100,
    tempTypeSpeed = 0;
    var type = function() {
        if (writingTag === true) {
            tag += HTML[cursorPosition];
        }
        if (HTML[cursorPosition] === "<") {
            tempTypeSpeed = 0;
            if (tagOpen) {
                tagOpen = false;
                writingTag = true;
            } else {
                tag = "";
                tagOpen = true;
                writingTag = true;
                tag += HTML[cursorPosition];
            }
        }
        if (!writingTag && tagOpen) {
            tag.innerHTML += HTML[cursorPosition];
        }
        if (!writingTag && !tagOpen) {
            if (HTML[cursorPosition] === " ") {
                tempTypeSpeed = 0;
            }
            else {
                tempTypeSpeed = (Math.random() * typeSpeed) + 50;
            }
            t.innerHTML += HTML[cursorPosition];
        }
        if (writingTag === true && HTML[cursorPosition] === ">") {
            tempTypeSpeed = (Math.random() * typeSpeed) + 50;
            writingTag = false;
            if (tagOpen) {
                var newSpan = document.createElement("span");
                t.appendChild(newSpan);
                newSpan.innerHTML = tag;
                tag = newSpan.firstChild;
            }
        }
        cursorPosition += 1;
        if (cursorPosition < HTML.length - 1) {
            setTimeout(type, tempTypeSpeed);
        }
    };
    return {
        type: type
    };
}
var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typewriter);
typewriter.type();

Answer 1

我不确定你想要怎么重复，但这会输出一次，等待三秒钟，清除输出，然后重新开始。

        cursorPosition += 1;
        if (cursorPosition >= HTML.length - 1) {
          setTimeout(function() {
            cursorPosition = 0;
            t.innerHTML = '';
            setTimeout(type, tempTypeSpeed);
          }, 3000);
        }
        else {
          setTimeout(type, tempTypeSpeed);
        }

Answer 2

只需更改结束条件：

if (cursorPosition < HTML.length - 1) {
     setTimeout(type, tempTypeSpeed);
}

一个无尽的：

cursorPosition = cursorPosition % HTML.length;
setTimeout(type, tempTypeSpeed);