0

I've seen a few questions that look similar to this, but nothing so far that seems to work in my situation. I made a little typing function - it's meant to loop through a series of phrases passed into the element's html attribute, and "type" them out, as if somewhere were typing and erasing each letter one by one.

The HTML, when rendered (it's written in PHP), looks something like this:

<h1>Constant text: <span data-text="Example 1, Example 2, Example 3">Changing Text</span></h1>

The "Changing Text" gets "typed out" and then "erased".

The "typing" function recursively adds letters to the element, one by one, from a string parameter, and the "erasing" function remove letters recursively:

function type (el, letters, delay = 0) {
    if ( letters.length < 1 ) {
        return;
    }

    var letter = letters.shift(),
        html   = el.text();

    el.text(html + letter);

    setTimeout(type(el, letters, delay += 200), delay);
}

function erase (el, delay = 0) {
    if ( el.html().length < 1 ) {
        return;
    }

    var text = el.text();

    el.text(text.substring(0, text.length - 1))

    setTimeout(erase(el, delay += 200), delay);
}

Both functions seem to be working, when debugging with console log. But for some reason, the setTimeout isn't setting a timeout... The letters in each phrase appear and disappear simultaneously...

VLAZ
  • 22,934
  • 9
  • 44
  • 60
Jillian Hoenig
  • 147
  • 1
  • 4
  • 24
  • 1
    You're invoking the function immediately instead of passing a reference to the function, i.e. you should be doing `setTimeout(() => type(el, letters, delay += 200), delay);` or in ES5 flavour, `setTimeout(function() { type(el, letters, delay += 200) }, delay);` – Terry Jan 05 '22 at 19:19

0 Answers0