JS打字机效果问题：文本顺序输出失败及打字光标添加求助

问题原因分析 #

第二段文本无法输出的原因 #

1. jQuery对象比较错误：代码中用element === $('#loading-text')判断当前元素，但jQuery每次调用$()都会生成新对象，直接全等比较永远不成立，导致第二段触发逻辑无法执行。
2. 全局变量冲突：i和isFinished作为全局变量，在多段打字流程中容易出现状态混乱，比如第一段结束后重置i的操作可能干扰后续逻辑。

光标效果未实现的原因 #

未添加对应的CSS动画或JS逻辑来模拟闪烁光标效果。

修复方案 #

1. 修复多段打字逻辑 #

• 移除全局变量，改为在函数内部维护打字状态，避免全局污染。
• 通过回调函数替代全局状态判断，在第一段完全打完后触发第二段打字流程。

2. 实现闪烁光标效果 #

使用CSS伪元素::after添加光标，并通过@keyframes实现闪烁动画，无需额外JS逻辑，性能更优。

完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="loading-text" class="typing-text"></div>
<div id="loading-text2" class="typing-text"></div>

CSS #

.typing-text {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 20px auto;
    width: 50%;
    opacity: 1;
    position: relative;
}

/* 闪烁光标样式 */
.typing-text::after {
    content: "|";
    position: absolute;
    animation: blink 1s infinite;
}

/* 打字完成后隐藏光标 */
.typing-text.finished::after {
    display: none;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

JavaScript #

const text1 = "Your first sentence here";
const text2 = "Your second sentence here";

function typeSentence(text, element, callback) {
    let i = 0;
    const interval = setInterval(() => {
        if (i === text.length) {
            clearInterval(interval);
            element.addClass('finished'); // 打字完成，隐藏光标
            callback && callback(); // 执行回调启动下一段
            return;
        }
        element.text(element.text() + text[i]);
        i++;
    }, 100);
}

// 先执行第一段打字，完成后触发第二段
typeSentence(text1, $('#loading-text'), () => {
    typeSentence(text2, $('#loading-text2'));
});

关键改进点 #

• 用回调函数替代全局状态判断，逻辑更清晰，避免变量污染导致的流程混乱。
• 用CSS动画实现光标闪烁，代码简洁且性能优于JS控制。
• 新增finished类，打字完成后自动隐藏光标，提升用户体验。

内容的提问来源于stack exchange，提问作者Wp-PHP