Перебирая массив и получая только последний элемент?

Question

Я пытаюсь l oop с помощью цветов для моего фона с javascript, но он возвращает только последний элемент, синий.

Я пытался просмотреть разные ответы на этом сайте, но я Я новичок в javascript и не мог понять, что они говорят. У кого-нибудь есть ответ?

function background() {
  const bg = document.querySelector('header');
  const colors = ['red', 'orange', 'yellow', 'blue'];

  for (let i = 0; i < colors.length; i++) {
    console.log(colors[i])
    bg.style.backgroundColor = colors[i];
  }
}

background();
setInterval(background, 5000);

<header style="width:100px; height:100px"></header>

Answer 1

Итак, console.log распечатывает все из них, но сохраняется только последний сохраненный?

Поскольку вы перезаписываете его внутри l oop, и циклы выполняются как мгновенно (или действительно очень быстро, никак не заметить это на глаз). То есть, потому что есть для l oop, setInterval вообще ничего не делает.

Что на самом деле происходит:

• Вы не делать: 1, подождать 5 секунд, 2, подождать 5 с и т. д. c.
• Вместо этого вы делаете: 1234, подождите 5 с, 1234, подождите 5 с и т. д. c.

Давайте рассмотрим пример решения в коде:

let i = 0;
// move variable i out of the function
// so it is not reset every time the function is run

function background () {
    // your code, nothing new here
    const bg = document.querySelector('header');
    const colors = ['red', 'orange', 'yellow', 'blue']
    bg.style.backgroundColor = colors[i];

    // then to have it change
    if (i < (colors.length) { i++; } // increase i+1 until we have reached max
    // i++ is shorthand for i = i + 1
    else i = 0;
    // and if have, reset it (that's why it is outside the function)
    // if it were inside it, it would reset every time the function runs
}
setInterval(background, 5000);
background();

Answer 2

Это связано с вашим for () l oop,

Вы просматриваете все индексы вашего массива, сохраняя цвета и устанавливая bg.style.backgroundColor = colors [i], но затем for () l oop замечает, что я по-прежнему

Он показывает только последнее значение 'blue' с конца конца л oop. :) Ваше условие выполнения для l oop не останавливается, пока не достигнет этого.

Может быть, увеличивать значение массива, а не проходить через него. Хотя пока не уверен, что это лучший способ сделать это.

(Впрочем, новичок в программировании, так что сначала послушайте других парней, буквально только что создал учетную запись переполнения стека за 5 минут go хаха)

Answer 3

Я думаю, вы надеетесь что-то вроде этого -

var colorIndex = 0;

function background () {
    const bg = document.querySelector('.header');
    const colors = ['red', 'orange', 'yellow', 'blue'];
	bg.style.background = colors[((colorIndex++) % colors.length)];
}

background();
setInterval(background, 1000);

.header {
  width: 100px;
  height: 150px;
  background: gray;
}

<div class="header"></div>

Примечание: Строка ((colorIndex++) % colors.length) означает, что я объявляю переменную индекса с именем colorIndex = 0 и увеличиваю ее на каждом интервале и если он превысил длину массива цветов, то снова обнуляем его по модулю на colors.length.

Answer 4

Вы получаете только последний, потому что вам нужно использовать функцию setTimeout() или setInterval(). Он возвращает только последний, потому что, когда он повторяется, он проходит до последнего, без остановки.

Answer 5

Вы хотите менять цвет фона каждые 5 секунд? В этом случае используйте фрагмент кода ниже

var colorIndex = 0;

function background() {
  const bg = document.querySelector('header');
  const colors = ['red', 'orange', 'yellow', 'blue']

  bg.style.backgroundColor = colors[colorIndex++];

  //resetting the index to 0 to repeat the colors after reaching end of colors
  if (colorIndex >= colors.length) {
    colorIndex = 0;
  }
}

setInterval(background, 5000)

background();

<header style="width:100px; height:100px"></header>

Answer 6

Я бы реализовал функцию без for l oop. Вместо этого вы можете увеличивать при каждом вызове функции значение индексатора. Как только вы достигли последнего пункта, сбросьте значение до нуля и начните с начала. Технически, вы можете думать о setInterval в этом случае как о вашем l oop, но вам нужно обрабатывать значение индексатора на каждой итерации.

Попробуйте следующее:

let i = 0;

function background () {
    const bg = document.querySelector('header');
    const colors = ['red', 'orange', 'yellow', 'blue']
    bg.style.backgroundColor = colors[i];
   
    if (i === colors.length - 1) i = 0;
    else i++;
}

setInterval(background, 1000);

background();

<header>This is the header</header>

Надеюсь, это поможет!