Программа зависает на 3 секунды

Question

Моя программа, во время нажатия кнопки "Старт" просто зависает на 3 секунды. Но я хочу, чтобы каждую секунду она изменяла содержимое тега totalSpeed (это тег h2), чтобы после нажатия она начинала обратный отчет 3...2...1. Благодарен за вашу помощь.

let speed = document.getElementById("totalSpeed");

function startGame(e) {
  for (let i = 3; i > 0; i--){
    speed.textContent = "Начало через: " + i;
    wait(1000);
  }
  /* Other code */
}

function wait(ms) {
  let currentDate = Date.now();
  while (currentDate + ms > Date.now()) {}
}

startBtn.addEventListener("click", startGame);

Answer 1

function startGame(e) {
  speed.textContent = "Начало через: " + 3;
  for (let i = 3; i > 0; i--) {
    setTimeout(function() {
      speed.textContent = "Начало через: " + (i - 1);
      if (i == 1) {
        /* Other code */
      }
    }, 1000 * (4 - i));
  }
}

Answer 2

не стоит через while работать с временем - это подвешивает комп (ведь он постоянно выполняет одну и ту же операцию без передыха)

используйте стандартные функции, например setTimeout

let speed = document.querySelector(".totalSpeed");

function myTimer(arg) {
    speed.textContent = "Начало через: " + arg;
    
    if (arg > 0)
      setTimeout(myTimer, 1000, arg - 1);      
}
    
function startGame(e) {
  
  myTimer(10);

  /* Other code */
}

speed.addEventListener("click", startGame);

.totalSpeed {
  display: inline-block;
  border: 1px solid red;
  padding: 10px;
  cursor: pointer;
}

<div class = 'totalSpeed'>КНОПКА</div>

БЛОГ НА HUSL

Программа зависает на 3 секунды

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