JavaScript实现聊天机器人多行文本逐字依次显示问题求助

看起来你想要实现的是多行文本按顺序逐字显示，而不是现在这样所有行同时开始蹦字符对吧？你当前的代码里三个showText是同步触发的，所以三个文本会一起逐字输出，这就不符合你要的“逐行输出”预期啦。咱们来调整下代码，实现真正的逐行逐字效果：

修正后的完整代码 #

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var showText = function (target, message, index, interval, callback) {
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () {
      showText(target, message, index, interval, callback);
    }, interval);
  } else if (typeof callback === 'function') {
    // 当前行逐字显示完成后，触发下一行的动画
    callback();
  }
}

$(function () {
  // 用回调实现链式触发，先完成第一行再开始第二行
  showText("#msg", "Hello, World!", 0, 500, function() {
    showText("#msg2", "This is the second line.", 0, 500, function() {
      showText("#msg3", "And here's the final line!", 0, 500);
    });
  });
});
</script>

关键修改说明 #

1. 添加回调机制：给showText函数新增了callback参数，当当前行的所有字符都显示完成后，会自动执行这个回调函数，以此触发下一行的逐字动画，实现“逐行依次输出”的效果。
2. 修复DOM语法问题：你原来的HTML里有两处错误：一是<div id="msg"/>这种自闭合写法在HTML中不规范（除了img、input等少数元素外，div需要闭合标签）；二是重复使用了id="text_target"，ID在页面中必须唯一，所以我直接去掉了冗余的span，用div本身作为文本容器。
3. 扩展性优化：如果后续你的聊天机器人需要动态添加更多对话内容，可以把逻辑封装成队列形式，更方便维护：

// 封装成队列版本，支持批量添加对话
function showTextQueue(textList, interval) {
  let currentLine = 0;
  const showNextLine = () => {
    if (currentLine >= textList.length) return;
    const { target, content } = textList[currentLine];
    showText(target, content, 0, interval, () => {
      currentLine++;
      showNextLine();
    });
  };
  showNextLine();
}

// 使用示例
$(function () {
  const chatMessages = [
    { target: "#msg", content: "Hi there! I'm your chatbot." },
    { target: "#msg2", content: "I can output text line by line, word by word." },
    { target: "#msg3", content: "Hope this works perfectly for you!" }
  ];
  showTextQueue(chatMessages, 500);
});

这样不管你有多少条对话内容，只要放到数组里，就能自动按顺序逐字逐行输出啦。

内容的提问来源于stack exchange，提问作者Nonononoki