如何使用JavaScript实现文本条件闪烁并解决无法停止的问题

文本一旦开始闪烁就无法停止，核心是两个逻辑漏洞：

• 全局setInterval每500ms就会给带.blinking类的元素追加淡入淡出动画，当你移除blinking类时，之前已经加入jQuery动画队列的动画不会自动清除，会继续执行完成
• 单次闪烁的总时长为1500ms（淡出）+750ms（淡入）=2250ms，远大于定时器500ms的触发间隔，动画会在队列中不断堆积，就算移除类，之前堆积的动画也会持续运行很长时间

只需要调整两处逻辑即可：

• 移除blinking类时，立刻终止元素上所有正在执行和排队的动画，强制将元素重置为完全可见的正常状态
• 闪烁触发逻辑增加过滤，不给已经在执行动画的元素重复追加动画，避免队列堆积

修复后的完整代码：

<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <title>Test blink</title>
</head>

<div id="wait-text">&nbsp</div>
<button onclick="updateText()">Click</button>

<script>
    var counter = 0;
    var wait_text = document.getElementById('wait-text');

    function updateText() {
        counter ++;
        wait_text.innerHTML = `wait ${counter}`;
        // 停止所有动画、清空队列、重置显示状态后再移除类
        $(wait_text).stop(true, true);
        wait_text.className = '';
        if (counter % 2 == 0) {
            wait_text.innerHTML = `blink ${counter}`;
            wait_text.className = 'blinking';
        }
    }

    function blinker() {
        let fadeout = 1500;
        let fadein = 750;
        // 只给当前未执行动画的闪烁元素加效果，避免重复追加动画
        $('.blinking').not(':animated').fadeOut(fadeout).fadeIn(fadein);
    }
    setInterval(blinker, 500);
</script>

• 新增$(wait_text).stop(true, true)逻辑：第一个true表示清空元素上所有排队等待执行的动画，第二个true表示直接跳转到当前动画的最终状态，保证元素移除闪烁类后立刻回到完全不透明的正常显示状态，不会卡在半透明的中间态
• 闪烁选择器新增.not(':animated')过滤：只选中当前没有在执行动画的.blinking元素追加淡入淡出效果，避免定时器高频触发导致动画在队列中无限堆积

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