主页 / 问题 / 1234405
Accepted
Руслан Мамедов
Asked:2022-01-21 23:59:07 +0000 UTC2022-01-21 23:59:07 +0000 UTC

使用 setInterval 或 setTimeout 实现倒计时

  • 772

我有一个启动游戏的功能。我想实现一个反向报告，当用户单击所需按钮时，该报告将显示在按钮本身上。然后，当报告结束时，将按钮的值设置为“开始！”。

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 本身。请帮助修复错误。谢谢您的帮助。

javascript

3 个回答

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

    • 2
  2. Best Answer

    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 

  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>

    • 1

相关问题