Loop in typewriting effect using JS

Question

I have a code of typewriting effect (below JS, CSS and html), however I cannot loop this effect. I wanted it to finish and after e. g. ten seconds clear and typewrite again. The effect should be repeated infinitely. I've tried to make a loop to clear text after typing, hover it does not work. Any clues/ideas? Thanks.

CSS:

#typewriter {
    font-size: 18px;
    margin: 0;
    background: none;
    border: none;
    color: black;
    font-family: Exo-Regular;}
    pre::after{
    content: "|";
    animation: blink 500ms linear infinite alternate;
    color: rgb(255,20,147);}


HTML:
<pre id="typewriter">
                        <span class="var-highlightST">my typewriting effect</span>
                    </pre>

JS:

function setupTypewriter(t) {
    var HTML = t.innerHTML;

    t.innerHTML = "";

    var cursorPosition = 0,
        tag = "",
        writingTag = false,
        tagOpen = false,
        typeSpeed = 50,
        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(typer);

typewriter.type();

var i = 0;
setInterval(typewriter.innerHTML = "", 100);

Answer 1

Ok, i think i figured out the problem. The problem was about setInterval() method, just clear the tag doesn't work.

This problem could be associated to a recursive function. In this case you need to recall the function itself after the function ends. Your function ends when you reach the last character:

if (cursorPosition < HTML.length - 1) {

        setTimeout(type, tempTypeSpeed);
}

This will call the function type() after tempTypeSpeed time, but when the cursorPoint reaches the length of HTML it stops.

So, instead of using setInterval, i would suggest to add this check:

if(cursorPosition == HTML.length - 1){
    setTimeout(reinit, 10000);
}

It reinit the variable, recall setupTypewriter and type method. I called it after 10000 ms to simulate your request (ten seconds). If you want, you can store the time in a variable and replace 10000 with that variable.

Reinit function:

function reinit(){

    typewriter = setupTypewriter(typer);

    typewriter.type();
}

I also modified a bit the css (to make the | blink effectively).

JSFiddle:

https://jsfiddle.net/86kftnou/3/

I hope it could help

Answer 2

try a function in setInterval

setInterval(function(){ typewriter.innerHTML = "" }, 100);

also 100 ms is not enough time to see anything happening , it is .1 second , try 3000

setInterval(function(){ typewriter.innerHTML = "" }, 3000);

also , I you have have another function on the typewriter that is something like setHTML :

  function setupTypewriter(t) {
     ...
     ...
    var setHTML = function(){ t.innerHTML = '';}
    ...
    ...
       return {
            type: type,
            setHTML: sertHTML
        };}