如何通过jQuery在移动端初始化Marquee并在桌面端销毁？

云上老周

2026-7-19

修复jQuery.Marquee响应式场景下的崩溃问题

原代码的核心问题：

窗口宽度变量width仅在页面初始化时获取，resize事件中始终使用旧值，导致响应式判断完全失效
未跟踪组件激活状态，重复调用初始化/销毁方法，造成DOM元素、事件绑定冲突，引发网站崩溃
resize事件无防抖处理，频繁触发会产生大量冗余DOM操作，加剧性能问题

修复后的代码：

<script src="//cdn.jsdelivr.net/npm/jquery.marquee@1.6.0/jquery.marquee.min.js" type="text/javascript" defer></script>
<script>
window.onload = function () {
  if (window.jQuery) {
    $(function () {
      const $marqueeEl = $('.tt-services-listing');
      let isMarqueeActive = false;
      let resizeTimer;

      // 封装marquee控制逻辑
      const handleMarquee = function() {
        const currentWidth = $(window).width();
        
        // 移动端：初始化组件（仅未激活时执行）
        if (currentWidth <= 767 && !isMarqueeActive) {
          $marqueeEl.marquee({
            duration: 20000,
            duplicated: true,
            delayBeforeStart: 0,
            startVisible: true,
          });
          isMarqueeActive = true;
        } 
        // 桌面端：销毁组件（仅激活时执行）
        else if (currentWidth >= 768 && isMarqueeActive) {
          $marqueeEl.marquee('destroy');
          isMarqueeActive = false;
        }
      };

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

      // 防抖处理resize事件，避免频繁触发
      $(window).on('resize', function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(handleMarquee, 250);
      });
    });
  }
};
</script>