2

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

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. Помогите исправить ошибку. Благодарю за помощь.

8
  • это не ошибка...setInterval будёт запущен через секунду, две и тд.
    – GGO
    21 янв 2021 в 16:08
  • @GGO, Мне надо, чтобы сначала выполнился setInterval, а потом код после него, а не наоборот. 21 янв 2021 в 16:09
  • 1
    а готовый вариант не подходит?
    – Greg--
    21 янв 2021 в 16:18
  • 2
    Хм, а здесь? - ru.stackoverflow.com/questions/1227537
    – user176262
    21 янв 2021 в 16:22
  • 1
    @Igor We need more countdowns %) 21 янв 2021 в 16:35

3 ответа 3

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)" />

2

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

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);">

2
  • 1
    Если несколько раз кликнут на кнопку - будет проблема) 21 янв 2021 в 16:18
  • 1
    Ну тут идея. Понятно, что надо делать disable (или по-другому убирать возможность клика, например через css) 21 янв 2021 в 16:19
1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.