如何修复jQuery幻灯片后台运行后出现的时序加快、无淡入淡出跳切故障

问题表现 #

基于公开模板开发的jQuery幻灯片，页面刚加载时功能正常；若保持页面打开，在后台运行期间访问其他网站或使用其他程序，切回页面时常出现两类异常：

• 播放时序大幅加快
• 幻灯片无正常淡入淡出过渡，仅快速生硬切换
  故障为间歇性触发，通常在网页后台运行一段时间后出现。

原始实现代码 #

JavaScript #

$("#slideshow > div:gt(0)").hide();
setInterval(function() {
    $('#slideshow > div:first')
        .fadeOut(2000)
        .next()
        .fadeIn(2000)
        .end()
        .appendTo('#slideshow');
}, 5000);

CSS #

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    height: 100%; 
    padding: 38% 0; 
}

.slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center
}

#slide-one {
    background-image: url("https://www.openaccessgovernment.org/wp-content/uploads/2021/03/dreamstime_xxl_2584709-scaled.jpg");  
}

#slide-two {
    background-image: url("https://i.natgeofe.com/n/80b97fe3-c0fb-40a6-a6a6-88b5c3bb9d30/01-lion-populations-nationalgeographic_1777804.jpg");
}
  
#slide-three {
    background-image: url("https://cdn.mos.cms.futurecdn.net/YB6aQqKZBVjtt3PuDSkJKe.jpg");
}

HTML #

<div id="slideshow">
    <div id="slide-one" class="slide">
    </div>
    <div id="slide-two" class="slide">
    </div>
   <div id="slide-three" class="slide">
   </div>
</div>

问题原因 #

故障并非模板逻辑本身的错误，是浏览器后台标签页优化机制与jQuery动画执行逻辑共同导致的：

1. 后台页执行节流规则
   现代浏览器为降低资源消耗，对后台标签页做两类硬性限制：
   • 大幅拉长setInterval的实际执行间隔，原本设置的5秒间隔在后台可能被拉长至数十秒
   • 基于requestAnimationFrame实现的动画会被直接冻结，不会推进执行进度
2. 动画队列堆积逻辑缺陷
   原代码使用固定间隔的setInterval触发切换逻辑，未判断上一轮切换动画是否执行完成。页面处于后台时，被浏览器节流积攒的切换回调，会在切回前台时一次性全部触发，瞬间往jQuery动画队列中塞入大量fadeOut/fadeIn任务；此时原本被冻结的动画状态已混乱，最终表现为跳过过渡过程、快速生硬切换。

修复方案 #

调整逻辑为动画执行完成后再触发下一轮切换，同时监听页面可见性变化，切回前台时清理堆积的动画任务，重置状态后重启切换流程。

修复后参考代码 #

// 初始化隐藏非首屏幻灯片
$("#slideshow > div:gt(0)").hide();
let slideTimer = null;

// 定义单轮切换逻辑
function runSlide() {
    $('#slideshow > div:first')
        .fadeOut(2000)
        .next()
        .fadeIn(2000)
        .end()
        .appendTo('#slideshow');
    // 等待当前动画完全执行后，再启动下一轮切换计时
    slideTimer = setTimeout(runSlide, 5000);
}

// 启动首轮切换
slideTimer = setTimeout(runSlide, 5000);

// 监听页面可见性变化
document.addEventListener('visibilitychange', function() {
    // 页面切回前台时触发重置逻辑
    if (document.visibilityState === 'visible') {
        // 清理所有未执行的动画任务，将幻灯片状态重置为当前第一块显示、其余隐藏
        $('#slideshow > div').stop(true, true).css('opacity', function(index) {
            return index === 0 ? 1 : 0;
        });
        // 清除之前的定时器，重新启动正常切换流程
        clearTimeout(slideTimer);
        slideTimer = setTimeout(runSlide, 5000);
    }
});

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