JavaScript undefined error in setInterval

[oimnet]

Hello,

Help please to stop setInterval after ending print ascii image.

setInterval(type, 100); - this type my image and it's ok, but i need to stop after complete, in my script it after complete printing it show: undefined

I know that i need clearInterval, i try some examples from stackoverflow but can't stop. You can see how it work https://codepen.io/oimnet/pen/PoXLmQE

 

[JosiahMaybe]

I know it would be something like this for clearInterval.
let variable = setInterval(...);
...
clearInterval(variable);

clearInterval can be inside a function or something. What conditions do you want to clear interval with? In a function, if condition satisfied then clear interval like that.
X E.

 

[oimnet]

If i change setInterval(type, 100); to
setTimeout(type, 1); it working without any errors but very slow.

I want it to stop after it has finished printing, and not give an error and not go into a loop.

 

[JosiahMaybe]

If you do not want it to loop then use setTimeout. If you want it to end after printing then add a condition to end when printing should end. Also, both setTimeout and setInterval are with millisecond time. If it is running slowly then it may be that you are running a massive amount of code. X E.

 

[oimnet]

Yes, that’s right, it goes through thousands of characters, since the color picture contains a large volume, and that’s the problem.If you make a picture with black text on a white background with setTimeout - it ok.

function stopinterval(){
  clearInterval(interval);
  return false;
}
function setupTypewriter(t) {
      var HTML = t.innerHTML;
      t.innerHTML = "";
      var cursorPosition = 0,
          tag = "",
          writingTag = false,
          tagOpen = false,
      var type = function() {
      
          if (writingTag === true) {
              tag += HTML[cursorPosition];
          }


          if (HTML[cursorPosition] === "<") {
              if (tagOpen) {
                  tagOpen = false;
                  writingTag = true;
              } else {
                  tag = "";
                  tagOpen = true;
                  writingTag = true;
                  tag += HTML[cursorPosition];
              }
          }
          if (!writingTag && tagOpen) {
              tag.innerHTML += HTML[cursorPosition];
          }
          if (!writingTag && !tagOpen) {
              if (HTML[cursorPosition] === " ") {
              }
              else {
                  
              }
              t.innerHTML += HTML[cursorPosition];
          }
          if (writingTag === true && HTML[cursorPosition] === ">") {
          
              writingTag = false;
              if (tagOpen) {
                  var newSpan = document.createElement("span");
                  t.appendChild(newSpan);
                  newSpan.innerHTML = tag;
                  tag = newSpan.firstChild;
              }
          }


          cursorPosition += 1;
          if (cursorPosition < HTML.length - 1) {
          setInterval(type, 100);
      
          } 
      };
      return {
          type: type
      };
  }


  var typer = document.getElementById('typewriter');
  typewriter = setupTypewriter(typewriter);
  typewriter.type();

Could you tell me where exactly to insert the code to stop the timer, since I tried it in different ways and it doesn’t work.

 

[JosiahMaybe]

I think you should have a global array of all intervals and as soon as to print would become undefined, clear them all.
Like array.push(setInterval(...)); with that setInterval and at beginning of function type, if (would be undefined) {clear all intervals; return;}.
That seems to be one way to do that.
X E.