javascript - 点击和恢复开始倒计时

问题描述

再次感谢大家和您的帮助。到目前为止，我已经能够在 JS 中有一个 2 分钟的计时器。

但是，我制作了一个正常工作的暂停按钮：

我希望在单击开始按钮 [使用事件侦听器] 时启动 2 分钟计时器。它目前正在自动启动。
我希望我的开始按钮在按下暂停按钮后恢复我停止的计时器点。

到目前为止，这是我的代码。我想我需要使用 preventDefault 或 setTimeout 事件，但我不太确定。你所有有用的答案真的帮助我适应了我的第一个项目，再次感谢大家:)

        let paused = false
        const startingMinutes = 2
        let time = startingMinutes * 60
        let timerId = setInterval(countDown, 1000)
    
        function countDown() {
    
          let minutes = Math.floor(time / 60)
          let seconds = time % 60
          time--
          console.log(minutes, 'minutes:', seconds, 'seconds')
          if (time <= 0) {
            console.log('Time is up!')
            clearInterval(timerId)
    }
    countdown.innerHTML = minutes + ' minutes ' + ': ' + seconds + ' seconds '
        }
    
    
        startBtn.addEventListener('click', countDown)
    
        function pauseGame() {
            if (paused === true || !paused === true) {
            startBtn.removeEventListener('click', countDown)
            clearInterval(timerId)
            }
        }
    
       pauseBtn.addEventListener('click', () => {
        pauseGame()
    })

标签： javascriptevent-handlingdom-eventspreventdefaultpause

我做了一些改变：

首次运行代码时计时器没有运行，因此它应该等于 true。
```
let paused = true
```

让我们将您的初始 setInterval 放在 eventListener 中，以便在单击开始按钮后开始倒计时：

let timerId ; // just initialize the timerId variable, without a value, so you can access it inside your functions

 startBtn.addEventListener('click', ()=>{
   paused=false
   timerId = setInterval(countDown, 1000)

   })

还要编辑 pauseGame 函数，不需要从 startButton 中删除 eventListener：

    function pauseGame() {
        paused=true
        clearInterval(timerId)
      }

一个修复！如果我们连续单击开始按钮，浏览器将执行新的间隔，使剩余的秒数比需要的更快完成，我们可以通过检查计时器是否已经运行来防止这种情况
```
  startBtn.addEventListener('click', ()=>{
      if (paused===false) {return;}
      paused = false
      timerId = setInterval(countDown, 1000)
   })
```

javascript - 点击和恢复开始倒计时 - Javascript

问题描述

解决方案

推荐阅读