Question

我正在尝试编写模拟实时打字的脚本。我已经做了一个循环，每隔0.15秒放一个字符，但它同时给我所有的文字。我应该使用递归，还是制作像＃34; sleep＆＃34;功能

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;

Answer 1

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

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

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

＆＃13;

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;

＆＃13;

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

＆＃13;

我应该使用递归，还是制作像＃34; sleep＆＃34;功能吗

你应该从不创建一个＆＃34; sleep＆＃34;函数意味着尝试暂停当前块的执行，因为它也会冻结整个浏览器。

您可以使用一种伪递归来实现输入，该函数调用setTimeout()以在延迟后再次运行自身，可能有点像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以递归地执行此操作，只需手动递增i而不是依赖于for循环：

function writeText() {
  if (i < text.length) {
    setTimeout(writeText, 150);
    allText += text[i];
    document.getElementById("screen").innerHTML = allText;
    i++;
  }
}

示例：https://codepen.io/petegivens/pen/VMxmXJ

Java Script实时打字

2 个答案: