window.matchMedia().matches在页面resize时重复执行代码的问题排查

问题根源 #

• 每次触发resize或初始调用bar_restaurant_images时，只要匹配对应媒体查询，就会新建一个setInterval定时器，但旧的定时器没有被清除，导致多个定时器同时修改同一个元素的背景图，出现“原分辨率代码持续运行”的冲突现象。
• 代码中重复使用jQuery(function(){...})（DOM就绪回调），页面加载完成后每次resize调用都会再次执行该回调，属于冗余逻辑。

修复步骤 #

1. 声明全局变量存储定时器ID，每次执行函数前先清除已存在的定时器，确保同一时间只有一个定时器运行。
2. 移除冗余的DOM就绪包裹，初始调用时DOM已就绪，resize触发时无需重复等待。
3. 简化索引重置逻辑，让代码更简洁易维护。

修改后的代码 #

// 全局存储定时器ID，用于清理旧定时器
let slideInterval = null;

var bar_restaurant_images = function () {
  // 先清除之前的定时器，避免多定时器冲突
  if (slideInterval) {
    clearInterval(slideInterval);
    slideInterval = null;
  }

  // 4K 分辨率匹配逻辑
  if (window.matchMedia("(max-width: 7680px) and (min-width: 3441px)  and (-webkit-max-device-pixel-ratio:1.0)").matches) {
    const imagesOfficers = ["officers-mess-section-4k.webp", "officers-mess-section-2-4k.webp", "officers-mess-section-3-4k.webp"];
    let i = 0;
    const $imgWrap = jQuery(".officers_mess_section_content_img_wrap");
    $imgWrap.css("background-image", `url(https://officers-mess.co.uk/stage/wp-content/themes/vintclub-child/img/${imagesOfficers[i]})`);
    
    slideInterval = setInterval(function () {
      i = (i + 1) % imagesOfficers.length;
      $imgWrap.fadeOut("slow", function () {
        jQuery(this).css("background-image", `url(https://officers-mess.co.uk/stage/wp-content/themes/vintclub-child/img/${imagesOfficers[i]})`);
        jQuery(this).fadeIn("slow");
      });
    }, 10000);
  }

  // 2560 分辨率匹配逻辑
  else if (window.matchMedia("(max-width: 2560px) and (min-width: 1921px) and (-webkit-max-device-pixel-ratio:1.0)").matches) {
    const imagesOfficers2560 = ["officers-mess-section-2560.webp", "officers-mess-section-2-2560.webp", "officers-mess-section-3-2560.webp"];
    let i2560 = 0;
    const $imgWrap = jQuery(".officers_mess_section_content_img_wrap");
    $imgWrap.css("background-image", `url(https://officers-mess.co.uk/stage/wp-content/themes/vintclub-child/img/${imagesOfficers2560[i2560]})`);
    
    slideInterval = setInterval(function () {
      i2560 = (i2560 + 1) % imagesOfficers2560.length;
      $imgWrap.fadeOut("slow", function () {
        jQuery(this).css("background-image", `url(https://officers-mess.co.uk/stage/wp-content/themes/vintclub-child/img/${imagesOfficers2560[i2560]})`);
        jQuery(this).fadeIn("slow");
      });
    }, 10000);
  }
};

jQuery(window).on('resize', bar_restaurant_images);
bar_restaurant_images();

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