JS setTimeout рекурсия?

Question

[GeKskill]

Не выходит сообразить почему только один раз вызывается setTimeout()?
Печатает только 2 буквы.

class app {

    constructor(options) {
        this.options = options;
    }

    typeWriter(text = '', target = 'typewriter', speed = 50, i = 0){
        let that = this;
        console.log(speed);
        if ( text.length > i ) {
              document.getElementById(target).innerHTML += text.charAt(i);
              
              setTimeout( that.typeWriter, speed , text, target, speed, ++i );
        } 
    }
}

let wow = new app();

wow.typeWriter('Some text');

v2 - стрелочная функция решила проблему:

class app {

    constructor(options) {
        this.options = options;
    }

    typeWriter(text = '', target = 'typewriter', speed = 50, i = 0){
        if ( text.length > i ) {
              document.getElementById(target).innerHTML += text.charAt(i);
              setTimeout(() => { this.typeWriter( text, target, speed, ++i ) }, speed );
        } 
    }
}

Answer 1

[SagePtr]

Уверены, что this внутри вызова функции typeWriter у вас всегда будет указывать на один и тот же объект?

Answer 2

[Mikhail Osher]

На коленке набросал, вроде работает. Сравните с Вашим решением.

const root = document.getElementById('root');

function writeText(text, delay) {
  if (!text) {
    return;
  }
  
  const char = text[0];
  const remaining = text.slice(1);
  
  setTimeout(() => {
    root.textContent = root.textContent + char;
    writeText(remaining, delay);
  }, delay);
}

function run() {
  writeText('hello world', 50);
}