jQuery简易滑块处于不可见状态时如何停止自动切换幻灯片

核心原因 #

Chrome等浏览器会在标签页处于后台不可见状态时，暂缓执行setInterval的回调任务，等标签页重新切回前台时会一次性执行所有积压的回调，就会出现幻灯片连续快速切换的问题。

解决方案 #

使用浏览器原生Page Visibility API监听页面可见性状态，页面隐藏时销毁轮播定时器，页面重新显示时重启定时器即可解决。原有CSS、HTML代码无需调整，仅修改JS部分即可：

修改后的JS代码

$('#slider').each(function() {
  let currentPosition = 0; // 轮播图起始位置
  let photo = $('.photo');
  let photoNums = photo.length; // 轮播图总数量
  
  let speed = 400; // 切换动画时长
  let timeout = 2000; // 单张轮播图停留时长
  let slideInterval = null; // 存储轮播定时器ID
  $('.photo').eq(0).show();
  
  function move(){
    // 用取余逻辑实现循环轮播
    let nextPhoto = (currentPosition + 1) % photoNums;
    photo.eq(currentPosition).fadeOut(speed);
    photo.eq(nextPhoto).fadeIn(speed);
    currentPosition = nextPhoto;
  }

  // 启动轮播
  function startSlider() {
    // 清空已有定时器，避免重复创建导致轮播速度异常
    if (slideInterval) clearInterval(slideInterval);
    slideInterval = setInterval(move, timeout);
  }

  // 停止轮播
  function stopSlider() {
    if (slideInterval) {
      clearInterval(slideInterval);
      slideInterval = null;
    }
  }

  // 页面加载完成后默认启动轮播
  startSlider();

  // 监听页面可见性变化事件
  document.addEventListener('visibilitychange', function() {
    document.hidden ? stopSlider() : startSlider();
  });
})

完整可运行代码（可选）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>jQuery轮播滑块</title>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <style>
    #slider {
      width: 600px;
      height: 300px;
      position: relative;
      margin: auto;
    }
    img {
      width: 100%;
    }
    .photo {
      position: absolute;
      display: none;
    }
  </style>
</head>
<body>
  <div id="slider">
    <div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=1" alt=""></div>
    <div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=2" alt=""></div>
    <div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=3" alt=""></div>
    <div class="photo"><img src="https://source.unsplash.com/random/1200x600?sig=4" alt=""></div>
  </div>
  <script>
    $('#slider').each(function() {
      let currentPosition = 0; // 轮播图起始位置
      let photo = $('.photo');
      let photoNums = photo.length; // 轮播图总数量
      
      let speed = 400; // 切换动画时长
      let timeout = 2000; // 单张轮播图停留时长
      let slideInterval = null; // 存储轮播定时器ID
      $('.photo').eq(0).show();
      
      function move(){
        // 用取余逻辑实现循环轮播
        let nextPhoto = (currentPosition + 1) % photoNums;
        photo.eq(currentPosition).fadeOut(speed);
        photo.eq(nextPhoto).fadeIn(speed);
        currentPosition = nextPhoto;
      }

      // 启动轮播
      function startSlider() {
        // 清空已有定时器，避免重复创建导致轮播速度异常
        if (slideInterval) clearInterval(slideInterval);
        slideInterval = setInterval(move, timeout);
      }

      // 停止轮播
      function stopSlider() {
        if (slideInterval) {
          clearInterval(slideInterval);
          slideInterval = null;
        }
      }

      // 页面加载完成后默认启动轮播
      startSlider();

      // 监听页面可见性变化事件
      document.addEventListener('visibilitychange', function() {
        document.hidden ? stopSlider() : startSlider();
      });
    })
  </script>
</body>
</html>

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