我需要整个类型的书写文本在页面上停留一段时间，然后在第二个循环中消失

Question

1 . 一旦在第二个循环之前完全写入，我需要将整个类型的写入文本保留在显示屏上。请在我的代码上应用该解决方案。2 . 其次，在我的文本字符串中，当我使用“b”或“strong”标签使特定文本变为粗体时，“<”符号在键入过程中会显示几毫秒，所有其他标签也会发生同样的情况。我不知道我的代码有什么问题。下面是我的代码。for (let i = 0; i < 10; i++) {  task(i);}function task(i) {  setTimeout(function() {    // Add tasks to do     var typeString = ['• I m Mr.Frits.\n• and   I <b>love </b> Pakistan...:)'];    var i = 0;    var count = 0    var selectedText = '';    var text = '';        (function type() {      if (count == typeString.length) {        count = 0;      }      selectedText = typeString[count];      text = selectedText.slice(0, ++i);      document.getElementById('typing').innerHTML = text.fontsize(6);      document.getElementById('typing').style.fontFamily = "monospace";      document.getElementById("typing").style.color = "black";      document.getElementById("typing").style.fontWeight = "normal";      if (text.length === selectedText.length) {        count++;        i = 0;      }      /* SOLUTION : wait two seconds when new line */      if (typeString[0][i - 1] == '\n') {        setTimeout(type, 1000);      } else {        setTimeout(type, 100);      }    }());  }, 1000);}<pre id="typing"></pre>

Answer 1

由于计数设置为1一旦达到字符串末尾的长度，因此您可以添加条件并增加超时（如果满足）：

/* SOLUTION : wait two seconds when new line */

if (typeString[0][i - 1] == '\n') {

    setTimeout(type, 1000);

} else if (count === 1) {

    setTimeout(type, 3000);

} else {

    setTimeout(type, 100);

}

使用<br />'s 时，浏览器不会将其注册为有效的 HTML，直到标记完成。因此，有一秒钟，所有渲染的内容都是<在标签的其余部分完成并且它理解该标签是什么之前。

for (let i = 0; i < 10; i++) {

  task(i);

}

function task(i) {

  setTimeout(function() {

    // Add tasks to do 

    var typeString = ['• I m Mr.Frits.\n• and   I love  Pakistan...:)'];

    var i = 0;

    var count = 0;

    var selectedText = '';

    var text = '';

    var typing = document.getElementById('typing');

    (function type() {

      if (count == typeString.length) {

        count = 0;

      };

      selectedText = typeString[count];

      text = selectedText.slice(0, ++i);

      typing.innerHTML = text.fontsize(6);

      typing.style.fontFamily = "monospace";

      typing.style.color = "black";

      typing.style.fontWeight = "normal";

      if (text.length === selectedText.length) {

        count++;

        i = 0;

      }

      /* SOLUTION : wait two seconds when new line */

      if (typeString[0][i - 1] == '\n') {

        setTimeout(type, 1000);

      } else if (count === 1) {

        setTimeout(type, 3000);

      } else {

        setTimeout(type, 100);

      }

    }());

  }, 1000);

}

<pre id="typing"></pre>