实现60秒倒计时

具体题目：点击按钮1，输入框显示"60, 59...", 点击按钮2，输入框恢复初始值"倒计时"

当时没有做出来，用了setTimout。 后面回到寝室重新做了一遍。

代码

  <button id="button1">开始倒计时</button>
  <button id="button2">结束倒计时</button>
  <input id="time" type="text" value="倒计时">

  <script>
    let button1 = document.querySelector('#button1')
    let button2 = document.querySelector('#button2')
    let timeValue = document.querySelector('#time')

    let time = 60
    let timerId = null

    button1.addEventListener('click', function() {
      // this.setAttribute('disabled', true)
      if (timerId != null) {
        // // 调用 alert() 程序会暂停，所以倒计时会暂停
        // alert('验证码已发送，请勿重复点击')
        return
      }
      timerId = setInterval(() => {
        if (time === 0) {
          timeValue.value = '倒计时'
          time = 10
          clearInterval(timerId)
          timerId = null
        } else {
          time--
          timeValue.value = time
        } 
      }, 1000)
    })

    button2.addEventListener('click', function() {
      // button1.removeAttribute('disabled')
      clearInterval(timerId)
      timerId = null
      time = 60
      timeValue.value = '倒计时'
    })
  </script>

总结

应该考虑到用户多次点击"button1"的情况，所以在button1的时间中应该判断setInterval是否存在，即倒计时是否还在进行，如果是，就应该直接return掉。这其实就是一个简单的节流。也可以考虑给开始倒计时的按钮"button1"加上一些禁用效果，

知识点拓展

• alert
• 防抖和节流
• setTimeout和setInterval
• requestAnimationFrame
• globalThis