How can I make the click event handler speed up the type function and then replace the text with the desired one?

Each type () function runs on scrolling if the block comes into view

My code

https://jsfiddle.net/sp_true/b5rj8mvd/4/

 function typeCode(lineItem) {
    const codeLine = lineItem.querySelector(".type"),
      columnBlock = lineItem.querySelector(".column"),
      code = codeLine.innerHTML,
      lengthContent = lineItem.querySelector(".hide-text").innerHTML.split('br').length

    let str = code,
      i = 0,
      isTag,
      text;
    columnBlock.innerHTML = Array(lengthContent + 1).fill(0).map((_, i) => `<span>${i+1}</span>`).join('<br>');

    (function type() {
      text = str.slice(0, ++i);
      if (text === str) return;

      lineItem.querySelector('.type').innerHTML = text;
      let char = text.slice(-1);
      if (char === '<') isTag = true;
      if (char === '>') isTag = false;

      if (isTag) return type();
      setTimeout(type, 40); // Here is speed to All Block left anim (60)
    }());
  }