如何实现打字机效果？模拟键盘输入欢迎消息的代码未生效求指导

嘿，我来帮你搞定这个打字机效果的bug！你的代码没生效的核心原因很简单：jQuery的.delay()方法只对加入到动画队列的操作生效，而.text()这种DOM文本修改操作根本不在这个队列里。再加上for循环是同步执行的，瞬间就把所有字符拼完了，自然看不到逐字输出的渐变效果。

下面给你两种可行的解决方案，选哪种都能实现你想要的打字机效果：

方案一：递归+setTimeout（直观易懂） #

这种方式通过异步递归调用，逐字追加字符，是实现打字机效果最常用的思路：

$(function(){
  $('h2').text(''); // 清空原有文本
  const msg = 'Welcome'; // 要展示的目标文本
  let currentIndex = 0;

  function typeNextChar() {
    if (currentIndex < msg.length) {
      // 每次往h2里追加一个字符
      $('h2').text($('h2').text() + msg[currentIndex]);
      currentIndex++;
      // 延迟1秒后调用自身，实现打字间隔
      setTimeout(typeNextChar, 1000);
    }
  }

  // 启动打字机效果
  typeNextChar();
});

方案二：利用jQuery队列机制（适配动画场景） #

如果你的页面已经在使用jQuery动画队列，可以用这种方式把文本修改操作加入队列，让.delay()生效：

$(function(){
  $('h2').text('');
  const msg = 'Welcome';

  // 把字符串拆成单个字符的数组，逐个处理
  $.each(msg.split(''), function(_, char) {
    $('h2').queue(function(next) {
      // 修改文本后，执行队列的下一个操作
      $(this).text($(this).text() + char);
      next();
    }).delay(1000); // 每个字符的输出间隔
  });
});

两种方案都能完美实现逐字输出的打字机效果，你可以根据自己的代码场景选择~

内容的提问来源于stack exchange，提问作者Guillermo Verón