Почему не выводится обратный отсчет через цикл и setTimeout?

Question

Хочу сделать простейший обратный отсчет через цикл и setTimeout, но, почему-то цифры выводятся в прямом порядке, то есть 1,2,3,4,5 а не наоборот. Подскажите, почему так происходит. И почему ещё задержку в миллисекундах в setTimeout умножают на i ?

function timeout(i) {
  setTimeout(() => {
    console.log(i);
  }, i * 2000)
}

for (let i = 5; i > 0; i--) {
  timeout(i);
}

Answer 1

почему ещё задержку в миллисекундах в setTimeout умножают на i

Цикл отработает моментально, поэтому нужна задержка для вывода каждого значения. Самое простое, это умножить количество миллисекунд на счётчик, чтобы каждая новая цифра выводилась каждые N секунд. Например, нужно выводить каждую секунду, а счётчик от 0 до 5, тогда получится

0 * 1000 // сразу выведет 0
1 * 1000 // через секунду выведет 1
2 * 1000 // через 2 секунды выведет 2, то есть через секунду после 1
3 * 1000 // через 3 секунды выведет 3, то есть через секунду после 2
4 * 1000 // через 4 секунды выведет 4, то есть через секунду после 3

Простая арифметика

По поводу кода: У вас при первой итерации идёт задержка 5 * 2000 = 10000, а последняя 1 * 2000 = 2000. Вот и получается, что последний вывод, где задержка минимальная, выведется первым, а первый - последним. Ну и всё что между ними соответственно. (из комментария @Deonis)

Чтобы поправить, я бы добавил доп параметр для умножения:

function timeout(i, timeoutCounter){
  setTimeout(()=>{
    console.log(i);
  }, timeoutCounter * 2000)
}

let totalCount = 5;
for(let i = totalCount; i > 0; i--){
  timeout(i, totalCount - i);
}

БЛОГ НА HUSL

Почему не выводится обратный отсчет через цикл и setTimeout?

Ответы (1 шт):