Задать вопрос
  • Как зациклить эффект печати?

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

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

    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();
    Ответ написан
    1 комментарий