Realize the verification code countdown function through Jquery

HTML tags

<button class="btn-primary getVerification">获取验证码</button>

Jquery code

There is a bit of a problem here :

Only setInerval can be used, setTimeout cannot be used, because setTimeout can only be executed once within the specified time, and setInterval is executed once every specified time.

// 获取验证码 实现计时器功能
$('.getVerification').click(function () {
  var timer = 60;
  let setTimer=setInterval(()=>{
    getTime();
  }, 1000)
  
  function getTime () {
    if (timer === 0) {
      timer = 60;
      $('.getVerification').text("发送验证码");
      $('.getVerification').removeAttr("disabled");
      $('.getVerification').css('width', '121px');
      $('.yanzhengmaInput').css('width', '200px');
      clearInterval(setTimer);
    } else {
      $('.getVerification').css('width', '40px');
      $('.getVerification').text(timer);
      $('.getVerification').attr("disabled",true);
      $('.yanzhengmaInput').css('width', '281px');
      timer--;
    }
    // console.log(timer);
  }
})

clearInterval(setTimer); Clear the timer, greatly saving memory space...