Looping javascript function on time intervals

Question

I a script, in JavaScript, that makes a typewriting effect. I've tried to loop it, so that it executes in a loop after 10 seconds from the end of execution. In other words there is a typewriting effect and when the text is written after ten second code will execute once again. I've tried with setTimeout(), however it did not work.

Thanks for help in advance.

function setupTypewriter(t) {
  var HTML = t.innerHTML;

  t.innerHTML = "";

  var cursorPosition = 0,
      tag = "",
      writingTag = false,
      tagOpen = false,
      typeSpeed = 50,
      tempTypeSpeed = 0;

  var type = function() {

    if (writingTag === true) {
      tag += HTML[cursorPosition];
    }

    if (HTML[cursorPosition] === "<") {
      tempTypeSpeed = 0;
      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] === " ") {
        tempTypeSpeed = 0;
      }
      else {
        tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      }
      t.innerHTML += HTML[cursorPosition];
    }
    if (writingTag === true && HTML[cursorPosition] === ">") {
      tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      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) {
      setTimeout(type, tempTypeSpeed);
    }

  };

  return {
    type: type
  };
}

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

typewriter = setupTypewriter(typewriter);

typewriter.type();

Tim Consolazio · Accepted Answer · 2017-04-02 10:31:43Z

1

You want setInterval.

setInterval(function(){ alert("Hello"); }, 3000);

This code will run every three seconds.

Full documentation, examples etc. here (including how to stop it):

https://www.w3schools.com/jsref/met_win_setinterval.asp

answered Apr 2, 2017 at 10:31

Tim Consolazio

4,8882 gold badges21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mikisz Over a year ago

thanks for sharing. I have seen that, however I am not sure how to use this with my function. JS is a liitle new for me (I use C# normally). As You can see at the bottom there are three lines of code and without them the typewriting effect does not work. When I use the code like that var myVar; function myFunction() { myVar = setInterval(setupTypewriter, 3000); } the function executes onces (only once the effect is displayed) and that's it. Nothing more happens.

Alisa Sireneva · Accepted Answer · 2017-04-02 10:39:57Z

1

typewriter = setupTypewriter(typewriter);

You pass typewriter variable to setupTypewriter, but it doesn't exist yet. Here you want to use

typewriter = setupTypewriter(typer);

BTW, I can't understand how you print tags. You print <, d, i, v, > with zero delay, but the parser still may break. You should print the tag at once: <div></div> and then append div's contents to it.

answered Apr 2, 2017 at 10:39

Alisa Sireneva

1812 silver badges12 bronze badges

1 Comment

Mikisz Over a year ago

Yes, thanks for comment - I've changed to typer (it was my mistake).

Collectives™ on Stack Overflow

Looping javascript function on time intervals

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related