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

Question

我有一些 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 变量在函数外部定义时，函数如何访问它，无论是什么原因导致它起作用，为什么当我移出 genel 变量时没有发生同样的事情。

Answer 1

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

Answer 2

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

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

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

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

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

Why does this const variable work in a function even when defined outside the function

javascript

scope

constants