Question

我正在学习Javascript，并且用两种方式编写了这段代码，但是我不明白为什么当变量'r'，'g'和'b'不在函数之外时它不起作用范围。我已经进行了研究，发现了很多答案，但是没有一个是真正客观的。

此功能（仅用于练习）的目标是将偶然的颜色每2秒设置为一个正方形。当我将变量放在函数外时，它只被调用一次，但是当它们在函数内时，它可以正常工作。

为什么这些变量仅在函数内部起作用，而“ div”变量在内部还是外部起作用？

*这有效：

var div = document.getElementById("dv1");

function changeColor() {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    div.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}

setInterval(changeColor, 2000);

*这不起作用：

var div = document.getElementById("dv1");
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);

function changeColor() {
   div.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}

setInterval(changeColor, 2000);

Answer 1

这与范围无关。

var r = Math.floor(Math.random() * 255);生成一个随机数并将其分配给r。

每次阅读r时，您都会得到一个随机数。相同的随机数。

除非再次调用r = Math.floor(Math.random() * 255);，否则您不会获得 new 随机数。

由于您没有在间隔上调用的函数内调用r = Math.floor(Math.random() * 255);，因此每次间隔到来时，您都将{strong> same 的值集分配给backgroundColor

为值div分配值，并在每次使用间隔时都可以重复使用，这是因为您想要相同的div 。

您可以在函数外部声明变量，它将起作用。您只需要在函数内分配值即可。

var div = document.getElementById("dv1");
var r, g, b;

function changeColor() {
  r = Math.floor(Math.random() * 255);
  g = Math.floor(Math.random() * 255);
  b = Math.floor(Math.random() * 255);
  div.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}

function logColor() {
  console.log({
    r,
    g,
    b
  });
}

setInterval(changeColor, 2000);
setInterval(logColor, 1000);

<div id="dv1">dv1</div>

为什么在函数外声明变量时变量不起作用？

1 个答案: