一个接一个地显示多个文本（Javascript）

Question

我想做一个简单的聊天机器人。它应该能够写多行。我的问题是我不知道如何让它们不同时出现，而是一个接一个出现（可能在两者之间有延迟以使其更真实）。

相关问题： Show text letter by letter

尝试的代码： http://jsfiddle.net/VZvK7/1447/

<div id="msg"/> 
<span id="text_target"></span></div>
<div id="msg2"/> 
<span id="text_target"></span></div>
<div id="msg3"/> 
<span id="text_target"></span></div>

var showText = function (target, message, index, interval) {    
if (index < message.length) { 
    $(target).append(message[index++]); 
    setTimeout(function () { showText(target, message, index, interval); },   interval); 
  } 
}

$(function () { 

showText("#msg", "Hello, World!", 0, 500);    
showText("#msg2", "Hello, World!", 0, 500);
showText("#msg3", "Hello, World!", 0, 500);
}); 

Answer 1

你可以试试这个：

const printMessage = (target, message, frequency) => {
    message.forEach((line, lineIndex) => {
    const baseInterval = message.slice(0, lineIndex).join(' ').length * frequency
    line.split('').forEach((character, charIndex) => {
        const t = setTimeout(() => {
        target.innerHTML = `${target.innerHTML}${character}${charIndex === line.length - 1 ? '<br/>' : ''}`
        clearTimeout(t)
      }, baseInterval + charIndex * frequency)
    })
  })
}

const target = document.getElementById('target')

printMessage(target, [
    'Hello World!',
    'How are you ?'
], 100)

JSFiddle 在这里：http://jsfiddle.net/VZvK7/1452/