代码之家 › 专栏 › 技术社区 › Maroof Kadiri

全局变量未在特定块中访问

addeventlistener global-variables scope javascript

0

Maroof Kadiri · 技术社区 · 1 年前

我在js代码的顶部创建了一个布尔变量,它在整个代码中都能完美工作,当它的值在使用它的所有函数/块中发生变化时,它会全局变化。但在一个特定的块中,我必须再次声明并初始化它,然后才能在该块中访问它。这是一个“document.addEventListener”块

我正在做一个响应式设计,所以我为不同的宽度大小创建了不同的事件监听器。

事情是这样发生的:

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

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

这个 button.addEventListener 根本不跑,因为 isVisible 条件尚未满足,这是因为全局变量未被访问。

只有当我声明时,它才会开始运行 可见 再次在里面 document.addEventListener 块。

1 回复 | 直到 1 年前

1

Barmar 1 年前

问题不在于 isVisible 变量,它是 query 。它设置为首次加载页面时的媒体查询结果。如果当时不匹配 button.addEventListener() 调用从未执行。

无条件添加单击事件侦听器。然后在里面做媒体检查,这样它就会有反应。

let isVisible = false

document.addEventListener("DOMContentLoaded", () => {
  const button = document.querySelector("put selector here");
  button.addEventListener("click", () => {
    if (window.matchMedia("(max-width: 600px)").matches) {
      if (!isVisible) {
        searchBar.style.display = "block";
        isVisible = true;
      } else if (isVisible && searchBar.value) {
        get_movie(searchBar.value);
      } else {
        searchBar.style.display = "none";
        isVisible = false;
      }
    }
  });
});

另一种方法是监听媒体查询中的更改,并根据需要添加/删除点击事件监听器。

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

query.addEventListener("change", () => {
  const button = document.querySelector("put selector here");
  if (query.matches) {
    button.addEventListener("click", toggleSearchBar);
  } else {
    button.removeEventListener("click", toggleSearchBar);
  }
});

function toggleSearchBar() {
  if (!isVisible) {
    searchBar.style.display = "block";
    isVisible = true;
  } else if (isVisible && searchBar.value) {
    get_movie(searchBar.value);
  } else {
    searchBar.style.display = "none";
    isVisible = false;
  }
}