Реализовать обратный отсчет с помощью setInterval или setTimeout

Question

у меня есть функция, которая запускает игру. Я хочу, чтобы во время того, как пользователь нажмет на нужную кнопку реализовать обратный отчет, который будет отображаться на самой кнопке. А потом, когда отчет закончится, установить значение кнопки равной "Старт!".

function startGame(e) {
    /* other code... */
    for (let i = 3; i > 0; i--) {
        setInterval(() => {
            startBtn.value = i;
        }, 1000);
    }
    startBtn.value = "Старт!";
    inputText.focus();
    startTime = Date.now();
}

Вместо этого у меня выполняется сначала код, расположенный ниже setInterval, а потом сам setInterval. Помогите исправить ошибку. Благодарю за помощь.

Answer 1

Что-то типа такого?

function startGame(startBtn) {    
    let counter = 3;    
    
    for (let i = counter, j = 0; i >= 0; i--) {        
        setTimeout(() => {     
            startBtn.value = (i === 0) ? 'Старт' : i;
        }, 1000 * j++);
    }    
}

<input type="button" value="YO" onclick="startGame(this);">

Answer 2

function startGame(e) {
  const timerFunc = (count) => {
    if (!count) {
      this.value = "Старт!";
      this.disabled = false;
      // код после setInterval
    } else {
      this.value = "Countdown - " + count;
      setTimeout(timerFunc, 1000, --count);
    }
  }
  
  this.disabled = true;
  timerFunc(3);
}

<input value="Старт!" type="button" onclick="startGame.call(this,event)" />

Answer 3

const sleep = (time = 1000) => new Promise((resolve) => setTimeout(resolve, time));

let is_start = false;

async function startGame() {
    if (is_start) return;
    is_start = true;

    for (let i = 3; i > 0; i--) {
        startBtn.innerText = i;
        await sleep();
    }
    
    startBtn.innerText = 'Конец';
    is_start = false;
}

startBtn.onclick = startGame;

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    font-size: 50px;
}

<button id="startBtn">Старт</button>

БЛОГ НА HUSL

Реализовать обратный отсчет с помощью setInterval или setTimeout

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