jQuery实现控制台打字后逐字退格无限循环动画的方法

你不用纠结ASCII 8退格转义符的用法——这个转义序列只在原生命令行终端环境下生效，网页里往DOM元素追加内容时，浏览器会直接忽略这个控制字符，根本达不到删除效果，直接操作字符串内容实现增删是网页端做这类打字动效的通用做法。

核心逻辑调整 #

在你原有递归逻辑的基础上，加一个状态位区分「输入」和「删除」两个阶段即可，不需要拆分新的函数，就能实现输入完成后逐字删除、无限循环的效果：

• 输入阶段：逐字追加目标文本字符，和你原有逻辑一致
• 文本全部输入完成后，停顿300ms模拟人工输入完的停顿，切换到删除状态
• 删除阶段：逐字切掉当前显示文本的最后一位，删除速度设置得比输入稍快，更符合真实控制台的操作手感
• 文本全部删空后，停顿500ms，重置索引切回输入状态，进入下一轮循环

可直接运行的修改后代码 #

// 控制台模拟模块
var term = $('.term');
var targetText = 'ping life';
// 存储当前终端显示的文本
var currentText = '';
// 当前处理的字符索引
var charIndex = 0;
// 阶段标记：true=输入中，false=删除中
var isTyping = true;

runner();

function runner() {
  let runDelay;
  if (isTyping) {
    // 追加当前位置的字符
    currentText += targetText.charAt(charIndex);
    charIndex++;
    // 保持原有的随机输入延迟，模拟真人打字的不规律间隔
    runDelay = Math.floor(Math.random() * 1000) + 50;

    // 全部字符输入完成后切换到删除状态，加短暂停顿更自然
    if (charIndex === targetText.length) {
      isTyping = false;
      runDelay = 300;
    }
  } else {
    // 切掉最后一个字符实现退格效果
    currentText = currentText.slice(0, -1);
    // 退格速度比打字稍快，随机间隔30-70ms
    runDelay = Math.floor(Math.random() * 40) + 30;

    // 文本全部清空后重置状态，进入下一轮循环
    if (currentText.length === 0) {
      isTyping = true;
      charIndex = 0;
      runDelay = 500;
    }
  }

  // 更新终端显示内容
  // 如果.term是input/textarea表单元素，把下面的.text()替换为.val()即可
  term.text(currentText);

  setTimeout(runner, runDelay);
}

注意事项 #

如果你的终端元素是普通div/span等非表单元素，直接用上面的代码即可；如果是用input或textarea做的模拟终端，把代码里更新内容的.text()方法换成.val()就能正常运行。

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