Adding time between functions without affecting the typewriter effect-CodePudding

I'm trying to delay a function by using setInterval however it seems to be affecting a typewriting effect I have added to my text. The first <h1> works fine ie the typewriting effect starts from the first character of the sentence whereas the typewriting effect for the next <h2> starts from the 4th word and ignores the previous 3 words - I do believe this has to do with the milliseconds I have set on my setInterval.

var h1MessageArray = ["West Sussex Web Design"];
var h2MessageArray = ["Your down-to-earth website designer."];
var speed = 100;
var textPosition = 0;


typewriter1 = () => {
  document.querySelector("#h1Message").innerHTML = h1MessageArray[0].substring(0,
    textPosition)   '<span>\u25AE</span>';

  if (textPosition   != h1MessageArray[0].length) {
    setTimeout("typewriter1()", speed);
  }

}

window.addEventListener('load', typewriter1);

typewriter2 = () => {
  document.querySelector("#h2Message").innerHTML = h2MessageArray[0].substring(0,
    textPosition)   '<span>\u25AE</span>';

  if (textPosition   != h2MessageArray[0].length) {
    setTimeout("typewriter2()", speed);
  }

}

window.setInterval(typewriter2, 4000);

#typewriter {
  width: fit-content;
  margin: auto;
}

span {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@media(max-width:480px) {
  #typewriter h2 {
    font-size: 1rem;
  }
}

<div >
  <div >
    <div  id="typewriter">
      <h1 id="h1Message"></h1>
      <h2 id="h2Message"></h2>
    </div>
  </div>
</div>

What am I missing?

CodePudding user response：

The problem is you are reusing textPosition in both functions. So the second function starts at the end of the position of the first function.

A simple solution is two different variables.

var h1MessageArray = ["West Sussex Web Design"];
var h2MessageArray = ["Your down-to-earth website designer."];
var speed = 100;
var textPosition1 = 0;
var textPosition2 = 0;



typewriter1 = () => {
  document.querySelector("#h1Message").innerHTML = h1MessageArray[0].substring(0,
    textPosition1)   '<span>\u25AE</span>';

  if (textPosition1   != h1MessageArray[0].length) {
    setTimeout("typewriter1()", speed);
  }

}

window.addEventListener('load', typewriter1);

typewriter2 = () => {
  document.querySelector("#h2Message").innerHTML = h2MessageArray[0].substring(0,
    textPosition2)   '<span>\u25AE</span>';

  if (textPosition2   != h2MessageArray[0].length) {
    setTimeout("typewriter2()", speed);
  }

}

window.setInterval(typewriter2, 4000);

#typewriter {
  width: fit-content;
  margin: auto;
}

span {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@media(max-width:480px) {
  #typewriter h2 {
    font-size: 1rem;
  }
}

<div >
  <div >
    <div  id="typewriter">
      <h1 id="h1Message"></h1>
      <h2 id="h2Message"></h2>
    </div>
  </div>
</div>