如何判断聊天中经JS模拟输入的元素完成屏幕‘打印’？

方法1：用MutationObserver监听文本/节点变化，检测停止更新 #

大部分模拟键盘输入的实现，都是通过逐次修改元素的textContent或者追加字符节点来实现的。你可以用MutationObserver监听最后一个.answer元素的文本变化，当连续一段时间没有新的变化时，就判定打印完成。

代码示例：

// 获取最后一个目标元素
const targetEl = document.querySelectorAll('.answer')[document.querySelectorAll('.answer').length - 1];
let timer = null;

// 创建观察者实例
const observer = new MutationObserver(() => {
  // 每次文本变化时重置定时器
  clearTimeout(timer);
  // 等待300ms（可根据实际输入速度调整）如果没有新变化，判定完成
  timer = setTimeout(() => {
    observer.disconnect(); // 停止监听
    // 这里执行你的后续操作
    console.log('文本打印完成，开始后续操作');
  }, 300);
});

// 配置观察选项：监听文本内容变化
observer.observe(targetEl, {
  characterData: true,
  subtree: true, // 如果文本是放在子节点里，需要开启这个
  childList: true
});

方法2：检测文本内容是否稳定 #

如果不想用观察者，也可以用定时轮询的方式，对比元素的文本内容，当连续两次轮询的文本完全一致时，判定完成。

代码示例：

const targetEl = document.querySelectorAll('.answer')[document.querySelectorAll('.answer').length - 1];
let prevText = '';
let stableCount = 0;
const checkInterval = setInterval(() => {
  const currentText = targetEl.textContent.trim();
  if (currentText === prevText) {
    stableCount++;
    // 连续2次（可调整）文本不变，判定完成
    if (stableCount >= 2) {
      clearInterval(checkInterval);
      // 执行后续操作
      console.log('文本打印完成');
    }
  } else {
    stableCount = 0;
    prevText = currentText;
  }
}, 200); // 轮询间隔，根据输入速度调整

方法3：检查元素的状态标识（如果有） #

有些实现会给正在打印的元素加状态类（比如printing），打印完成后移除这个类。你可以监听元素的类名变化，或者直接轮询检查类名：

const targetEl = document.querySelectorAll('.answer')[document.querySelectorAll('.answer').length - 1];
const checkClassInterval = setInterval(() => {
  // 假设打印中会有printing类，完成后移除
  if (!targetEl.classList.contains('printing')) {
    clearInterval(checkClassInterval);
    // 后续操作
    console.log('打印完成');
  }
}, 150);

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