按时间间隔循环javascript函数答案

【问题标题】：Looping javascript function on time intervals按时间间隔循环javascript函数
【发布时间】：2017-04-02 18:39:57
【问题描述】：

我是一个脚本，在 JavaScript 中，产生打字效果。我试图循环它，以便它在执行结束后 10 秒后循环执行。换句话说，有一种打字效果，当文本在十秒后写入时，代码将再次执行。我试过setTimeout()，但是没有用。

提前感谢您的帮助。

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();

【问题讨论】：

标签： javascript infinite-loop effect

【解决方案1】：

你想要setInterval。

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

此代码将每三秒运行一次。

这里有完整的文档、示例等（包括如何停止它）：

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

【讨论】：

感谢分享。我已经看到了，但是我不确定如何在我的函数中使用它。 JS 对我来说是一个新事物（我通常使用 C#）。正如您在底部看到的那样，有三行代码，没有它们，打字效果就不起作用。当我使用 var myVar; 之类的代码时函数 myFunction() { myVar = setInterval(setupTypewriter, 3000); } 该函数执行一次（仅在显示效果后），仅此而已。没有更多的事情发生。

【解决方案2】：

typewriter = setupTypewriter(typewriter);

您将typewriter 变量传递给setupTypewriter，但它还不存在。这里你要使用

typewriter = setupTypewriter(typer);

顺便说一句，我不明白你如何打印标签。您以零延迟打印<、d、i、v、>，但解析器仍然可能会中断。您应该立即打印标签：<div></div>，然后将 div 的内容附加到它。

【讨论】：

是的，感谢您的评论 - 我已更改为 typer（这是我的错误）。