Как зациклить эффект печати?

Question

[Games2and1IT]

Хочу зациклить код эффекта печати. Обычным циклом while не получается. Что делать?
Код html:
<p class="quality" id="quality"></p>

Код JS:

var quality = document.getElementById("quality");
var i = 0;
var txt = "Креативность"; /* Текст */
var speed = 85; /* Скорость/длительность эффекта в миллисекундах */
var x = 0;
function typeWriter() {
  if (i < txt.length) {
    quality.innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
txt = "Креативность";
typeWriter();
setTimeout(() => {
  quality.innerHTML = "";
  txt = "000000000000Эффективность";
  typeWriter();
  setTimeout(() => {
    quality.innerHTML = "";
    txt = "0000000000000000000000000Индивидуальность";
    typeWriter();
  }, 2500);
}, 2000);

Answer 1

[0xD34F]

Строки сложить в массив. Завести два индекса - текущей строки и её последнего отображаемого символа. Если при увеличении количества отображаемых символов выходим за границу строки - переключаемся на следующую строку и сбрасываем счётчик символов.

Куда, что и с какой задержкой будем печатать:

const el = document.querySelector('p');
const strings = [ 'hello, world!!', 'fuck the world', 'fuck everything' ];
const delay = 100;

Печатаем:

function Typewriter(el, strings, delay) {
  let i = 0;
  let length = 0;

  return setInterval(() => {
    if (++length > strings[i].length) {
      i = -~i % strings.length;
      length = 0;
    }

    el.textContent = strings[i].slice(0, length);
  }, delay);
}


const intervalId = Typewriter(el, strings, delay);
// хотим остановить, делаем так: clearInterval(intervalId);

или

function Typewriter(el, strings, delay) {
  let timeoutId = null;

  (function step(i, length) {
    length = -~length % -~strings[i].length;
    i = (i + !length) % strings.length;
    el.innerText = strings[i].substring(0, length);
    timeoutId = setTimeout(step, delay, i, length);
  })(0, 0);

  return () => clearTimeout(timeoutId);
}


const stop = Typewriter(el, strings, delay);
// хотим остановить, делаем так: stop();

Comments

[Games2and1IT]

Спасибо огромное. Я просто новичок

Answer 2

[Виктор Л]

class Typewriter {
  constructor(element, texts, speed) {
    this.element = element;
    this.texts = texts;
    this.speed = speed;
    this.index = 0;
    this.textIndex = 0;
  }

  start() {
    this.type();
  }

  type() {
    if (this.index < this.texts[this.textIndex].length) {
      this.element.innerHTML += this.texts[this.textIndex].charAt(this.index);
      this.index++;
      setTimeout(() => this.type(), this.speed);
    } else {
      this.index = 0;
      this.textIndex = (this.textIndex + 1) % this.texts.length;
      this.element.innerHTML = "";
      setTimeout(() => this.type(), this.speed);
    }
  }
}

const qualityElement = document.getElementById("quality");
const TEXTS = ["Креативность ", "Эффективность ", "Индивидуальность "];
const SPEED = 85;

const typewriter = new Typewriter(qualityElement, TEXTS, SPEED);
typewriter.start();