为何window.matchMedia回调在不满足条件时仍触发？JS媒体查询异常

嘿，这个问题我之前踩过坑！其实核心是你对matchMedia的监听逻辑理解有点偏差，我来给你拆解清楚：

为什么回调会在不满足条件时触发？ #

matchMedia的监听回调（不管是用addListener还是标准的addEventListener('change')），触发时机是媒体查询的匹配状态发生变化时——也就是说：

• 当窗口从「不满足401-600px区间」变到「满足」，会触发一次
• 当窗口从「满足区间」变到「不满足」，也会触发一次

它不是只在“满足条件”时才执行，而是只要状态切换就会调用回调。你之前的代码没做判断，所以不管是进入还是离开区间，都会执行console.log和设置背景色，看起来就像“不满足时也被调用”了。

为什么感觉有两个回调被触发？ #

大概率是窗口 resize 过程中，状态连续切换了（比如从601px拉到600px时，浏览器可能会触发多次状态变化），或者你不小心重复添加了监听。不过更关键的是，你没在回调里过滤匹配状态，所以每次状态变化都执行了代码，看起来像多次触发。

修正后的代码 #

给你调整一下，加上状态判断，同时用更标准的API：

// 先定义媒体查询对象
const sizeQuery = window.matchMedia("(min-width: 401px) and (max-width: 600px)");

// 页面加载时先执行一次，确保初始状态正确
updateBackground(sizeQuery);

// 用标准的addEventListener替代addListener（addListener是旧API）
sizeQuery.addEventListener('change', updateBackground);

function updateBackground(event) {
  if (event.matches) {
    // 只有当匹配条件时才执行操作
    console.log("进入401-600px区间，设置红色背景");
    document.body.style.background = "red";
  } else {
    // 不匹配时恢复默认背景
    console.log("离开401-600px区间，恢复默认背景");
    document.body.style.background = "";
  }
}

额外提醒 #

• 一定要通过event.matches判断当前是否匹配媒体查询，这是控制逻辑的关键
• 页面初始化时手动调用一次处理函数，避免页面加载时窗口已经在目标区间，但背景色没设置的问题
• 尽量用addEventListener('change', ...)代替addListener，后者是早期的非标准API，现在主流浏览器都支持标准方式了

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