使用jQuery按屏幕尺寸条件运行函数并在resize时清除setInterval

问题根源 #

• 原代码在resize事件里先执行checkScreenSize()再清定时器，导致小屏刚创建的定时器立刻被清除，大屏时又没主动停掉已在运行的定时器
• 每次触发小屏判断都会新建定时器，旧的没清，多个定时器同时跑导致轮播混乱
• 大屏状态下没重置轮播样式，残留小屏的高亮效果

修复后的完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infobarContainer">
  <div class="tagline tagline2 move">
    USP 1
  </div>
  <div class="tagline tagline2">
    USP 2
  </div>
  <div class="tagline tagline2">
    USP 3
  </div>
  <div class="tagline tagline2">
    USP 4
  </div>
</div>

CSS

.move {background-color:red}

JavaScript

$(document).ready(function () {
  // 全局声明定时器ID，确保能跨函数访问
  let intervalId = null;

  $(window).on("resize", function (e) {
    // 先清定时器，再检查屏幕尺寸，避免刚创建的定时器被误清
    clearInterval(intervalId);
    checkScreenSize();
  });

  // 页面加载时先执行一次
  checkScreenSize();

  function checkScreenSize() {
    const newWindowWidth = $(window).width();
    const divs = [...document.querySelectorAll(".tagline2")];

    if (newWindowWidth < 768) {
      // 先清旧定时器，避免多个定时器叠加
      clearInterval(intervalId);
      let currentIndex = 0;

      intervalId = setInterval(function () {
        // 移除当前元素的move类
        divs[currentIndex].classList.remove("move");
        // 更新索引，循环回到开头
        currentIndex = (currentIndex + 1) % divs.length;
        // 给新元素添加move类
        divs[currentIndex].classList.add("move");
      }, 3000);
    } else {
      // 大屏状态：停止定时器，重置样式到初始状态
      clearInterval(intervalId);
      // 先移除所有move类
      divs.forEach(div => div.classList.remove("move"));
      // 给第一个元素加回move类
      divs[0].classList.add("move");
    }
  }
});

关键修改说明 #

• 调整resize执行顺序：先清除定时器再检查屏幕尺寸，解决小屏定时器被误清的问题
• 全局维护定时器ID：确保在任何地方都能正确访问和清除定时器
• 大屏状态处理：主动清除定时器并重置轮播样式，避免残留小屏效果
• 小屏初始化优化：创建新定时器前先清除旧的，防止多个定时器同时运行导致轮播混乱
• 索引逻辑优化：用局部变量currentIndex替代挂载在divs上的属性，避免全局污染

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