为什么即使在函数外定义这个 const 变量也能在函数中工作

如何解决为什么即使在函数外定义这个 const 变量也能在函数中工作

我有一些 javascript 代码可以将网页中的文本元素更改为随机颜色。我是新手，但代码确实有效。每三秒，特定元素的文本颜色就会更改为一种新的随机颜色。

const handler = function() {
    const genselector = "div.tw-c-text-alt-2.tw-flex > span";
    const genel = document.querySelector(genselector);
    var randcolor = Math.floor(Math.random()*16777215).toString(16);
    genel.style.color = "#" + randcolor;
}
setInterval(handler,3000);

如果我将两个 const 变量移到函数外，程序将不再工作，这是有道理的，因为变量是在函数外定义的，它们不是全局变量。

const genselector = "div.tw-c-text-alt-2.tw-flex > span";
const genel = document.querySelector(genselector);

const handler = function() {
    const specel = document.querySelector(specselector);    
    var randcolor = Math.floor(Math.random()*16777215).toString(16);
    genel.style.color = "#" + randcolor;
}
setInterval(handler,3000);

但是，如果我只将第一个变量移到函数之外，代码仍然有效，即使我认为不应该这样做。

const genselector = "div.tw-c-text-alt-2.tw-flex > span";

const handler = function() {
    const genel = document.querySelector(genselector);
    var randcolor = Math.floor(Math.random()*16777215).toString(16);
    genel.style.color = "#" + randcolor;
}
setInterval(handler,3000);

在函数外部定义 genselector 变量时，它如何被函数访问，以及无论是什么导致它工作，为什么当我移出基因变量时不会发生同样的事情。

解决方法

当网络浏览器执行您的 javascript 时，网页的 DOM 和元素还没有准备好。这意味着 document.querySelector(genselector) 找不到该元素并且 genel 为空。这在场景 1 和 3 中不是问题，因为 3 秒后 handler 函数再次执行。但在场景 2 中，genel 的值仅被分配一次。

因此，如果这（几乎）是您拥有的唯一 JS 代码，那么这是正常行为。为什么您的代码在第二个示例中崩溃是因为如果您不使用事件侦听器，您的代码将在您的 DOM 加载之前执行。所以基本上你正在尝试对尚未呈现的东西做一个 docuement.queryselector 。在最后一个示例中，您在执行函数时执行查询，这可能是创建所有 HTML 元素的点，以便查询找到该元素。

现在额外了解如何解决这个问题。您可以在文档上设置一个事件侦听器，等待所有 HTML 代码加载完毕：

window.addEventListener('load',(event) => {
  <<< Add your code here >>> 
});

然后在使用代码的第二个示例时就不会出错。