правильное размещение setInterval - PullRequest
Новая
       6

правильное размещение setInterval

0 голосов
/ 06 марта 2019

Я не могу найти правильное использование 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();
}

1 Ответ

5 голосов
/ 06 марта 2019

setInterval будет генерировать div каждую секунду, но рекурсивный вызов test(); просто запустит его бесконечно и никогда не даст обновиться DOM.Затем превышается коллстак, и скрипт умирает.

Не вызывать test() рекурсивно .Назовите его only from 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; }
...