How to make Javascript typing effect in loop forever?

Question

I got this text typing animation effect code that types out a code and it's perfectly working however, I'm looking to make it loop forever with a 3 seconds delay when it ends. The animation and everything remains the same. I just don't want it to end as I'm displaying at the side of my project page.

How would I go about this?

Here's a working 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

I'm not sure exactly how you want this to repeat, but this will type the output once, wait three seconds, clear the output, then start again.

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

Answer 2

Just change the ending condition:

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

To an endless one:

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