窗口未聚焦时jQuery自动滑块多幻灯片同时显示问题排查

问题描述 #

使用jQuery开发的内容自动滑块，在窗口未聚焦时出现多张幻灯片同时显示的异常，无法定位问题根源，疑惑是否是window.setTimeout的限制或jQuery方法导致。错误表现为所有幻灯片同时显示。

问题代码 #

// 初始化定时器变量及幻灯片相关参数
let autoSlider;
let nextSlide = 2;
let maxSlides = 4;
let slideDelay = 5000;

// 幻灯片切换函数
const changeToSlide = slide => {
  // 仅当目标幻灯片未处于激活状态时执行
  if(!$(`#slider-container .slider-position[data-slide=${slide}]`).hasClass('active')) {
    // 清除定时器以停止自动切换
    clearTimeout(autoSlider);

    // 隐藏所有幻灯片，设置目标幻灯片淡入
    $('#slider-container .slider-position').removeClass('active');
    $(`#slider-container .slider-position[data-slide=${slide}]`).addClass('active');
    $('#slider-container .slide').hide();
    $(`#slider-container .slide[data-slide=${slide}]`).css("display", "flex").hide().fadeIn(1000);

    // 更新下一张幻灯片序号，超出最大值则循环到第一张
    nextSlide = slide == maxSlides ? 1 : slide + 1;
    // 递归调用定时器函数
    SetAutoSlider(nextSlide);
  }
}

// 设置自动切换定时器
const SetAutoSlider = nextSlide => {
  autoSlider = window.setTimeout(function() {
    changeToSlide(nextSlide);
  }, slideDelay);
}

// 幻灯片控制按钮点击事件
$('.slider-control-btn').click(function() {
  changeToSlide($(this).find('.slider-position').data('slide'));
});

// 启动自动滑块
SetAutoSlider(nextSlide);

问题根源 #

浏览器在窗口失焦时会节流定时器（比如Chrome会将setTimeout的最小执行间隔限制到1000ms甚至更久），导致原本5秒的延迟被打乱，多个定时器任务堆积。当窗口重新聚焦时，这些堆积的任务会集中执行，多次触发changeToSlide调用。

同时代码存在潜在问题：changeToSlide中的clearTimeout(autoSlider)只能清除最后一次设置的定时器，旧的堆积定时器任务依然会触发，造成多次切换逻辑并行执行，最终导致多张幻灯片同时显示。

修复方案 #

1. 用requestAnimationFrame替代setTimeout（更精准的定时） #

requestAnimationFrame会跟随浏览器刷新节奏，窗口失焦时自动暂停，避免任务堆积。封装带取消功能的延迟函数：

// 带取消功能的延迟函数
const createDelay = (ms, callback) => {
  let isCancelled = false;
  const start = Date.now();
  const tick = () => {
    if (isCancelled) return;
    if (Date.now() - start >= ms) {
      callback();
    } else {
      requestAnimationFrame(tick);
    }
  };
  requestAnimationFrame(tick);
  return () => { isCancelled = true; };
};

// 替换原SetAutoSlider函数
let cancelAutoSlider;
const SetAutoSlider = nextSlide => {
  cancelAutoSlider = createDelay(slideDelay, () => {
    changeToSlide(nextSlide);
  });
};

// 修改changeToSlide中的清除逻辑
const changeToSlide = slide => {
  if(!$(`#slider-container .slider-position[data-slide=${slide}]`).hasClass('active')) {
    // 取消之前的延迟任务
    if (cancelAutoSlider) cancelAutoSlider();
    // ... 其余原有逻辑不变
  }
}

2. 增加状态锁，防止并发切换 #

添加状态锁确保同一时间只有一个切换流程在运行：

let isSliding = false; // 新增状态锁
const changeToSlide = slide => {
  // 仅当无切换动作且目标幻灯片未激活时执行
  if(!$(`#slider-container .slider-position[data-slide=${slide}]`).hasClass('active') && !isSliding) {
    isSliding = true; // 上锁
    if (cancelAutoSlider) cancelAutoSlider();

    $('#slider-container .slider-position').removeClass('active');
    $(`#slider-container .slider-position[data-slide=${slide}]`).addClass('active');
    $('#slider-container .slide').hide();
    $(`#slider-container .slide[data-slide=${slide}]`).css("display", "flex").hide().fadeIn(1000, () => {
      isSliding = false; // 动画完成后解锁
    });

    nextSlide = slide == maxSlides ? 1 : slide + 1;
    SetAutoSlider(nextSlide);
  }
}

3. 监听窗口聚焦/失焦，主动控制滑块状态 #

窗口失焦时暂停滑块，聚焦时恢复，从根源避免定时器堆积：

$(window).on('blur', () => {
  if (cancelAutoSlider) cancelAutoSlider();
});

$(window).on('focus', () => {
  SetAutoSlider(nextSlide);
});

总结 #

核心问题是浏览器失焦时的定时器节流导致任务堆积，结合状态锁、更可靠的定时方案，再配合窗口事件监听，即可彻底解决多张幻灯片同时显示的异常。

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