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

【问题标题】：Start Countdown on Click and Resume - Javascript点击和恢复开始倒计时 - Javascript
【发布时间】：2021-10-22 06:58:39
【问题描述】：

再次感谢大家和您的帮助。到目前为止，我已经能够在 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()
    })

【问题讨论】：

标签： javascript event-handling dom-events preventdefault pause

【解决方案1】：

我做了一些改变：

第一次运行代码时计时器没有运行，所以它应该等于 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)
   })
```

【讨论】：