如何用jQuery实现带延迟循环的文本逐词加粗效果？

嘿，我来帮你把这个每隔2秒逐词加粗的循环效果搞定！你的思路已经找对方向了，不过咱们可以调整一些细节，让代码更健壮、简洁，也更贴合jQuery的使用习惯😉

先聊聊原代码的小优化点 #

• 全局变量x容易被其他代码干扰，咱们把它封装成局部变量更安全
• 原生DOM操作可以换成jQuery的写法，更简洁
• 没处理文本中的空格，可能会导致加粗效果包含多余空格
• 定时器的逻辑可以更清晰，避免索引混乱

优化后的完整代码 #

$(document).ready(function() {
    let currentIndex = 0;
    // 缓存目标DOM元素，避免每次查找浪费性能
    const $targetDiv = $('#divId');

    // 提取并分割文本，同时处理多余空格
    function getSplitWords() {
        const originalText = $targetDiv.text().trim();
        return originalText.split('/').map(word => word.trim());
    }

    function updateBoldWord() {
        const words = getSplitWords();
        if (words.length === 0) return; // 空内容直接返回，防止报错

        // 用map构建带加粗效果的文本数组，再拼接回去
        const formattedContent = words.map((word, idx) => {
            return idx === currentIndex ? `<b>${word}</b>` : word;
        }).join('/');

        // jQuery设置HTML内容
        $targetDiv.html(formattedContent);

        // 索引循环：到最后一个词后重置为0
        currentIndex = (currentIndex + 1) % words.length;
    }

    // 启动2秒间隔的定时器
    setInterval(updateBoldWord, 2000);

    // 可选：手动启动/重置的函数（如果需要触发的话）
    window.start = function() {
        currentIndex = 0;
        updateBoldWord(); // 立即执行一次，不用等2秒
    };
});

代码亮点说明 #

• DOM就绪判断：$(document).ready确保页面元素加载完成后再执行代码，不会出现找不到divId的问题
• 元素缓存：把$('#divId')存在变量里，不用每次更新都重新查找DOM，提升性能
• 空格处理：用trim()去掉文本首尾和每个词的多余空格，避免加粗效果里出现空白
• 简洁的循环逻辑：用(currentIndex + 1) % words.length实现自动循环，比单独判断索引是否等于长度更优雅
• jQuery风格操作：全程用jQuery的方法操作DOM，符合你想用jQuery实现的需求

如何使用 #

1. 确保页面引入了jQuery库
2. 给目标div设置id="divId"，内容格式比如苹果/香蕉/橙子/葡萄
3. 页面加载后会自动启动循环，或者调用start()手动触发

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