javascript - Javascript实时打字

我正在尝试编写模拟现场打字的脚本。我做了一个循环，将每个字符每0.15s放入一次，但是它同时给了我所有文本。我应该使用递归，还是使用“睡眠”功能？

var text = "Lorem ipsum dolor sit amet enim. Etiam ullamcorper.
  Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit
  lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a,
  ultricies porta urna. Vestibulum commodo volutpat a, convallis ac,
  laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.
  Nulla imperdiet sit amet magna. Vestibulum dapibus, mau"

var allText = "";

function putText()
{
  document.getElementById("screen").innerHTML = allText;
};

function writeText()
{
    for(i=0; i<text.length; i++){
    allText = allText + text[i];
    setTimeout(putText, 150);
};
}

window.onclick  = writeText;

最佳答案

setTimout() function将函数的第一个参数放在队列中以便以后运行，它不会暂停当前函数的执行。因此，在从第一个putText()调用setTimeout()之前，您的整个for循环已完成，然后allText拥有了整个字符串。

另外，通过在循环中指定150的延迟，您可以使所有函数从现在开始运行150ms，而不是彼此之间运行150ms。使用150 * (i+1)将延迟乘以循环计数器。

解决此问题的一种方法是使用setTimeout()允许您指定要传递给函数的参数。因此，修改putText()以接受要显示的文本的参数，然后通过以下方式传递该值：

var text = 'Lorem ipsum dolor sit amet enim. Etiam ullamcorper.';

var allText = "";

function putText(text) {
  document.getElementById("screen").innerHTML = text;
}

function writeText() {
  for(i=0; i<text.length; i++){
    allText = allText + text[i];
    setTimeout(putText, 150 * (i+1), allText);
  };
}

window.onclick  = writeText;

<div id="screen">Click here to start typing.</div>

  我应该使用递归，还是使用“睡眠”功能？


切勿在试图暂停当前块执行的意义上创建“睡眠”函数，因为这也会冻结整个浏览器。

您可以使用一种伪递归来实现键入，该伪递归具有一个函数，该函数在延迟（可能有点类似）之后调用setTimeout()再次运行自身：

function writeText(text) {
  var currentLetter = 1;
  function nextLetter() {
    document.getElementById("screen").innerHTML = text.slice(0, currentLetter);
    if (++currentLetter <= text.length)
      setTimeout(nextLetter, 150);
  }
  nextLetter();
}

var text = 'Lorem ipsum dolor sit amet enim. Etiam ullamcorper.';

window.onclick = function() { writeText(text); };

<div id="screen">Click here to start typing.</div>

关于javascript - Javascript实时打字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46657669/