Detailed explanation of jQuery implementation of timer function

This time I will bring you jQuery a detailed explanation of how to implement the timer function. What are the precautions for jQuery to implement the timer function? Here is a practical case, let’s take a look.

In the process of writing the project, I encountered the business requirement that the front end should send the verification code within 60 seconds, so I used the timer function:

setInterval(functionxxx(){
   //业务逻辑
},隔多少时间执行一次)

60 seconds timing idea:

1. Set the seconds: 60s
2. Set the content: change in real time, the seconds content
3. After the end: remove the disable of the button , and the content will be restored to the original

//计时器60秒
functiontimeInterval(){
  $("#code_send_btn").html("60秒后重新获取邮箱验证码");
  vartimeSec = 59;
  vartimeStr ='';
  varcodeTime = setInterval(functionInternal(){
    if(timeSec == 0){
      $("#code_send_btn").html("获取邮箱注册码");
      $("#code_send_btn").removeAttr("disabled","disabled");
      clearInterval(codeTime);
      return;
    }
    timeStr ="("+timeSec+")获取邮箱注册码";
    $("#code_send_btn").html(timeStr);
    timeSec--;
  },1000);
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to edit canvas images

How to set js to prohibit repeated submission of forms

The above is the detailed content of Detailed explanation of jQuery implementation of timer function. For more information, please follow other related articles on the PHP Chinese website!