typewriting effect using generator and yield

Question

I am trying to create a typewriter effect using javascript, I want to write the first sentence first, then second sentence and so on.

I tried doing it using using setTimeout and it is working fine, but I want to add more sentences and do it using generators to add more sentences, but I am having really hard time to figure it out and translate my code to generator function because setTimeouts are nested and are in loops.

This is my code using setTimeout:

const s1 = `I am sentence 1`;
const s2 = `I am sentence 2`;

s1.split('').forEach((ch, i) => {
  setTimeout(c => {
    document.querySelector('h1').textContent += c
  }, i * 70, ch)
});
setTimeout(() => {
  s2.split('').forEach((ch, i) => {
    setTimeout(c => {
      document.querySelector('h2').textContent += c
    }, i * 100, ch)
  });
}, s1.length * 70)

<h1></h1>
<h2></h2>

Please help me doing it using generator, thank you!

Answer 1

The implementation using generator may look like this:

function* generator(str) {
    yield* str;
}

const addSentence = (element, sentence, done) => {
  const gen = generator(sentence);
  const el = document.querySelector(element);
  const interval = setInterval(() => {
    const ch = gen.next().value;
    if (!ch) {
      clearInterval(interval);
      if (done) {
        done();
      }
      return;
    }
    el.textContent += ch;
  }, 100);
}
addSentence('h1', 'Sentence 1', () => {
  addSentence('h2', 'Sentence 2');
}); 

<h1></h1>
<h2></h2>

Please let me know if this helps.