Question

我似乎无法在我的代码中找到setinterval（）的正确用法。它应该每秒刷新9种新的随机颜色。

我已经尝试将我的代码放置在带有嵌套循环的箭头函数中，希望这将为完成的每个循环启动间隔。

但是，这并没有解决任何问题。请参考下面的完整代码：

let test = () => {
  for (let i = 0; i <= 9; i++) {
    addRandomColorToSquare();
  }
}

setInterval(test, 1000);


let addSquareToDOM = function(color) {
  let square = document.createElement('div');
  square.className = 'square';
  square.style.backgroundColor = color;
  document.body.appendChild(square);
}

let addRandomColorToSquare = function() {
  const randomRed = Math.floor(Math.random() * 256);
  const randomGreen = Math.floor(Math.random() * 256);
  const randomBlue = Math.floor(Math.random() * 256);

  let rgbColor = `rgb(${randomRed}, ${randomGreen}, ${randomBlue})`;

  addSquareToDOM(rgbColor);
  test();
}

Answer 1

setInterval将每秒生成一次div，但是递归调用test();只会无限运行它，并且永远不会让DOM更新。然后超出了调用堆栈，脚本消失了。

请勿递归调用test() 。从setInterval命名为“ 仅”。

然后，您需要给div元素一些高度，以便可以有一些像素来渲染背景色。

let test = () => {
  for (let i = 0; i <= 9; i++) {
    addRandomColorToSquare();
  }
}

setInterval(test, 1000);


let addSquareToDOM = function(color) {
  let square = document.createElement('div');
  square.className = 'square';
  square.style.backgroundColor = color;
  document.body.appendChild(square);
}

let addRandomColorToSquare = function() {
  const randomRed = Math.floor(Math.random() * 256);
  const randomGreen = Math.floor(Math.random() * 256);
  const randomBlue = Math.floor(Math.random() * 256);

  let rgbColor = `rgb(${randomRed}, ${randomGreen}, ${randomBlue})`;

  addSquareToDOM(rgbColor);
}

div { display: inline-block; height: 10px; width: 10px; }

setInterval

1 个答案: