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

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') {&nbsp; &nbsp; setTimeout(type, 1000);} else if (count === 1) {&nbsp; &nbsp; setTimeout(type, 3000);} else {&nbsp; &nbsp; setTimeout(type, 100);}使用<br />'s 时，浏览器不会将其注册为有效的 HTML，直到标记完成。因此，有一秒钟，所有渲染的内容都是<在标签的其余部分完成并且它理解该标签是什么之前。for (let i = 0; i < 10; i++) {&nbsp; task(i);}function task(i) {&nbsp; setTimeout(function() {&nbsp; &nbsp; // Add tasks to do&nbsp;&nbsp; &nbsp; var typeString = ['• I m Mr.Frits.\n• and&nbsp; &nbsp;I love&nbsp; Pakistan...:)'];&nbsp; &nbsp; var i = 0;&nbsp; &nbsp; var count = 0;&nbsp; &nbsp; var selectedText = '';&nbsp; &nbsp; var text = '';&nbsp; &nbsp; var typing = document.getElementById('typing');&nbsp; &nbsp; (function type() {&nbsp; &nbsp; &nbsp; if (count == typeString.length) {&nbsp; &nbsp; &nbsp; &nbsp; count = 0;&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; selectedText = typeString[count];&nbsp; &nbsp; &nbsp; text = selectedText.slice(0, ++i);&nbsp; &nbsp; &nbsp; typing.innerHTML = text.fontsize(6);&nbsp; &nbsp; &nbsp; typing.style.fontFamily = "monospace";&nbsp; &nbsp; &nbsp; typing.style.color = "black";&nbsp; &nbsp; &nbsp; typing.style.fontWeight = "normal";&nbsp; &nbsp; &nbsp; if (text.length === selectedText.length) {&nbsp; &nbsp; &nbsp; &nbsp; count++;&nbsp; &nbsp; &nbsp; &nbsp; i = 0;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; /* SOLUTION : wait two seconds when new line */&nbsp; &nbsp; &nbsp; if (typeString[0][i - 1] == '\n') {&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(type, 1000);&nbsp; &nbsp; &nbsp; } else if (count === 1) {&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(type, 3000);&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(type, 100);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }());&nbsp; }, 1000);}<pre id="typing"></pre>