如何实现chattext函数顺序执行？解决多次调用并发冲突问题

你遇到的问题是因为每次调用chattext都会启动独立的定时器，多个定时器并行修改聊天框内容导致输出混乱。可以通过消息队列+状态标记的方式让调用按顺序执行，具体修改如下：

修改后的代码 #

// 维护消息队列和执行状态
const chatQueue = [];
let isProcessing = false;

function chattext(chat) {
  // 将新消息加入队列
  chatQueue.push(chat);
  // 如果当前没有在处理消息，启动处理流程
  if (!isProcessing) {
    processQueue();
  }
}

function processQueue() {
  // 队列为空则结束
  if (chatQueue.length === 0) {
    isProcessing = false;
    return;
  }

  isProcessing = true;
  const currentChat = chatQueue.shift(); // 取出队列第一个消息
  playaudio("talking.mp3");
  const chatElement = document.getElementById("chat");
  chatElement.style.display = "block";
  chatElement.innerHTML = ""; // 开始处理新消息时清空聊天框
  let count = 0;

  function update() {
    // 修复字符截取逻辑：从当前索引取单个字符
    chatElement.innerHTML += currentChat.substring(count, count + 1);
    count++;
    if (count < currentChat.length) {
      setTimeout(update, 50);
    } else {
      // 当前消息处理完成，继续处理队列下一个
      processQueue();
    }
  }
  update();
}

关键改动说明 #

• 消息队列chatQueue：所有调用chattext的文本都会先存入队列，不会立即执行
• 执行状态isProcessing：标记当前是否正在处理消息，避免重复启动处理流程
• processQueue函数：负责从队列取消息执行，当前消息处理完成后自动触发下一个消息的处理
• 修复字符截取逻辑：原代码中初始count=0时，substring(count-1, count)会取无效索引范围，改成从count到count+1更直观合理

现在连续调用chattext("hello world")和chattext("hi")，会先完整输出"hello world"，再输出"hi"，不会出现混乱。

内容的提问来源于stack exchange，提问作者Video Game Bot