如何为Persona 5 SMS模拟系统实现消息间隔自定义与打字提示

一、自定义消息间隔修复 #

你之前用setInterval的问题在于，这个API会按固定间隔重复触发，无法根据每条消息的messageWait动态调整延迟，导致所有消息被快速批量触发。正确的做法是用递归式setTimeout，每次处理完一条消息后，根据当前消息的属性设置下一次触发的延迟：

// 替换ChatThread组件的mounted方法及新增对应methods
mounted() {
  this.currentMsgIndex = 0;
  this.renderNextMsg();
},
data() {
  return {
    displayedMessages: [],
    currentMsgIndex: 0
  };
},
methods: {
  renderNextMsg() {
    // 所有消息处理完毕则终止递归
    if (this.currentMsgIndex >= this.messages.length) return;

    const targetMsg = this.messages[this.currentMsgIndex];
    // 将当前消息加入显示队列
    this.displayedMessages.push(targetMsg);
    this.currentMsgIndex++;

    // 用当前消息的messageWait作为下一条消息的延迟，兜底值设为2000ms
    const delay = targetMsg.messageWait || 2000;
    setTimeout(() => {
      this.renderNextMsg();
    }, delay);
  }
}

二、正在打字提示实现 #

通过新增状态记录当前打字角色，配合延迟切换实现提示效果：

1. 组件逻辑修改 #

data() {
  return {
    displayedMessages: [],
    currentMsgIndex: 0,
    typingSender: null // 记录正在打字的角色
  };
},
methods: {
  renderNextMsg() {
    if (this.currentMsgIndex >= this.messages.length) {
      this.typingSender = null;
      return;
    }

    const targetMsg = this.messages[this.currentMsgIndex];
    // 触发打字提示
    this.typingSender = targetMsg.sender;

    // 打字提示持续时长（可单独设置typingWait属性，或用messageWait的70%）
    const typingDelay = targetMsg.typingWait || Math.floor(targetMsg.messageWait * 0.7);

    setTimeout(() => {
      // 隐藏打字提示并显示消息
      this.typingSender = null;
      this.displayedMessages.push(targetMsg);
      this.currentMsgIndex++;

      // 计算消息显示后到下一条触发的剩余间隔
      const remainingDelay = targetMsg.messageWait - typingDelay;
      setTimeout(() => {
        this.renderNextMsg();
      }, remainingDelay > 0 ? remainingDelay : 0);
    }, typingDelay);
  }
}

2. 模板添加提示元素 #

<!-- 在聊天消息列表后插入 -->
<div v-if="typingSender" class="typing-tip">
  <img :src="typingSender.avatar" class="tip-avatar" alt="typing">
  <span>{{ typingSender.name }} 正在打字...</span>
</div>

3. CSS样式补充 #

.typing-tip {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.tip-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

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