全局变量isVisible在DOMContentLoaded块中无法访问的问题

问题分析 #

你遇到的核心问题是作用域隔离：代码顶部声明的isVisible看似全局，但在DOMContentLoaded回调中无法正常访问，只有在回调内重新声明才能生效。这种情况通常是因为变量并非真正的全局作用域，或者被同名局部变量遮蔽。

解决方案 #

1. 确保变量处于真正的全局作用域

如果你的脚本是以模块模式（<script type="module">）加载的，顶级的let/const变量会被限制在模块作用域内，不会挂载到window对象上，导致回调无法访问。此时可以直接将变量挂载到window上：

window.isVisible = false;
let query = window.matchMedia("(max-width: 600px)");

document.addEventListener("DOMContentLoaded", () => {
  if (query.matches) {
    button.addEventListener("click", () => {
      if (!window.isVisible) {
        searchBar.style.display = "block";
        window.isVisible = true;
      } else if (window.isVisible && searchBar.value) {
        get_movie(searchBar.value);
      } else {
        searchBar.style.display = "none";
        window.isVisible = false;
      }
    });
  }
});

2. 排查并避免作用域遮蔽

检查代码中是否在DOMContentLoaded回调或其父作用域内存在同名的isVisible变量——这种情况会导致局部变量遮蔽全局变量，使得你无法访问到顶部声明的全局值。移除回调内的重复声明，确保直接引用全局变量即可。

响应式逻辑优化（额外建议） #

当前代码仅在DOM加载完成时检查一次屏幕宽度，窗口尺寸变化后不会更新监听逻辑。可以添加媒体查询的监听函数，实现实时响应：

let isVisible = false;
let query = window.matchMedia("(max-width: 600px)");

// 封装按钮点击逻辑
function handleButtonClick() {
  if (!isVisible) {
    searchBar.style.display = "block";
    isVisible = true;
  } else if (isVisible && searchBar.value) {
    get_movie(searchBar.value);
  } else {
    searchBar.style.display = "none";
    isVisible = false;
  }
}

// 处理屏幕宽度变化
function handleScreenResize(e) {
  // 先移除旧监听，避免重复绑定
  button.removeEventListener("click", handleButtonClick);
  
  if (e.matches) {
    button.addEventListener("click", handleButtonClick);
  }
}

document.addEventListener("DOMContentLoaded", () => {
  // 初始化时执行一次
  handleScreenResize(query);
  // 监听屏幕宽度变化
  query.addListener(handleScreenResize);
});

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