Как сделать задержку каждого шага в цикле For?

Question

[gpyshenko]

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

var bestValues = document.querySelectorAll('.aboutUs-column-dscr');

function get_style() {
	for (i = 0; i < bestValues.length; i++) {
		bestValues[i].style.color = "green";
	}
}
setInterval(get_style, 1000);

Answer 1

[Dark Hole]

Варианта два: цепочка функций с задержкой или отлагать на текущий i.

Вариант 1

function get_style() {
  function f() {
    if(i >= bestValues.length) return;
    bestValues[i].style.color = "green";
    ++i;
    setTimeout(f, 1000);
  }
  var i = 0;
  f();
}

Вариант 2

function get_style() {
  for (i = 0; i < bestValues.length; i++) {
    (function(i) {
      setTimeout(function() { bestValues[i].style.color = "green"; }, 1000 * i);
    }(i));
  }
}

UPD: Исправил последствия недосыпа
UPD: Исправили окончательно(в прошлый раз почему-то слетело)

Comments

[Ivanq]

Только во втором случае setTimeout вместо setInterval

[Dark Hole]

Ivanq: простите, ошибся.

[Ivanq]

Dark Hole: Бывает. :)

[Ivanq]

Dark Hole: UPD: Не исправили :)

Answer 2

[riot26]

https://jsfiddle.net/6v0q08w1/