dom语句中验证码倒计时案例的小细节

最新推荐文章于 2024-07-12 16:55:56 发布

langziangTom

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量162

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/langziangTom/article/details/127579033

版权

在我们用dom语句写验证码倒计时时,会遇到几个小问题

先放源码

<body>
  <ul>
    <li>
      手机号:
      <input type="text">
    </li>
    <li>
      验证码:
      <input type="text" class="verify">
      <button id="btn">获取验证码</button>
    </li>
  </ul>

  <script>
      const btn = document.querySelector('#btn')
      btn.addEventListener('click',function(){
       btn.disabled = true
    // 这行代码非常重要,表示点击之后,按钮立即禁用,可以有效的解决用户瞬间点几下按钮打开多个定时器的bug
        let i = 5
        btn.innerHTML = `${i}秒之后重新获取`
        id = setInterval(function(){
           i--         
           if(i>=1){
           btn.disabled = true
           btn.innerHTML = `${i}秒之后重新获取`
           }else{
             btn.disabled = false
            btn.innerHTML = `获取验证码`
            clearInterval(id)
            
           }
        },1000)
      })
  </script>
</body>

第一个问题,按下按钮,按钮需要过一段时间才能实现禁用效果.

第二个问题,按下按钮,里面的文字不会立刻跳转成(x秒之后重新获取),也需要一段时间.

其实这两个问题属于同一种类型的错误,第一种bug,会导致按钮没有及时禁用,用户能在瞬间点多下按钮,导致打开多个定时器.而第二种bug影响稍小,会在观感上给用户一种延迟的感觉.

这两个bug的原因都是因为实现这俩功能的代码位置放错.下面是放错的源码