倒计时到0停止，用在手机获取验证码的倒计时

最新推荐文章于 2021-05-18 05:44:15 发布

原创最新推荐文章于 2021-05-18 05:44:15 发布 · 647 阅读

0 ·

CC 4.0 BY-SA版权

前端小知识同时被 2 个专栏收录

208 篇文章

订阅专栏

时间

20 篇文章

订阅专栏

本文介绍如何在手机获取验证码时实现倒计时功能，并避免倒计时过程中不断调用接口的问题。通过设置定时器并控制其在倒计时结束时清除，确保倒计时结束后停止接口请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input type="text" placeholder="填写验证码" class="check1 "/><button class="verify" onclick="settime(this);return false;">获取验证码</button>

········································································································································

改写上面的内容，因为如果点击验证码访问接口，自己循环的话就会一直访问那个接口。这样就有问题啦。所以你要把判断循环的内容写在另一个函数里面；就是那个if，else。

var countdown=120;
function settime(obj) {
    //访问接口
AAAA=setInterval(function() {   //一直执行，内部函数为false。内部就终止但是定时器还会一直执行。你必须关闭定时器才行，所以在这里命名定时器,定义成全局变量，这样其他函数里面也可以用。等到countdown=0的时候就停止clearInterval()
   return updeteTime(obj) }   //相当于他不停的访问自己在循环
    ,1000)
   }

function updeteTime(e){

    if (countdown == 0) {
    obj.removeAttribute("disabled");
    $(obj).css("background-color","#FE663F");
        obj.innerHTML="短信验证码";
        countdown = 120;
        return;   //重要重要，注意else后面没有return，因为到倒计时为o的时候才跳出循环的。否则就一直在执行自己。XXXXXX错啦。因为这个函数结束，定时器也没有结束。

    clearInterval(AAAA)
   } else {
        obj.setAttribute("disabled", true);
    $(obj).css("background-color","#ccc")
        obj.innerHTML="重新发送(" + countdown + ")";
        countdown--;
    }

}

·······················································································································································

下面是我用vue+jquery写的

<li class="mui-table-view-cell">
            <label>验证码</label>
            <input type="text" class="mui-input-clear" placeholder="请输入验证码" v-model="code" style="width:45%;"/>
            <button type="button" class="verify" @click="verify()">获取验证码</button>
</li>

data() {
return {

listcphone:"",

count:60,

code:"",

a:0

}

//     验证码
       verify(){
           var vm=this;
           if(this.listcphone==""){return mui.toast("请先输入手机号！")}
           else if (!/^1\d{10}$/.test(this.listcphone)) {return mui.toast('手机号格式不正确!');}
           else{
               this.$api("Member/findPassSend",{phone:this.listcphone}).then(db=>{});

       this.a= setInterval(()=>{         //因为要一直不停的循环直到倒计时为0时，所以不能用上面的那个setTimeout
                vm.updatetime();   //必须有return，否则它会一直执行的。
           },1000)

           }
       },

updatetime(){
       if(this.count==0){
              $(".verify").removeAttr("disabled").css("background-color","#fff").html("获取验证码");
              this.count=60;
           window.clearInterval(this.a);   //停止这个定时器、如果只是停止这个函数，定时器还是会运行的
              }
        else{
           $(".verify").attr("disabled","disabled").css("background-color","#ccc").html("重新发送"+this.count+'s');
             this.count--;
       }


       },

---------------------------------------------------------------------------------------------------------------

用vue来写的

<el-button type="text" @click="getMessageCode" v-if="!isSend">{{msg}}</el-button>
<el-button type="text" v-if="isSend">{{seconds + 's后重试'}}</el-button>

isSend: false,
seconds: 60,
msg: '发送验证码',

getMessageCode() {

这里写接口的一下信息

this.$api("Member/findPassSend",{phone:this.listcphone}).then(db=>{

if(res.code==1){

this.isSend = true;
var auth_timetimer = setInterval(() => {
this.seconds--;
if (this.seconds <= 0) {
this.isSend = false;
this.msg = '重新发送'
clearInterval(auth_timetimer);
this.seconds = 60
}

}, 1000);

}

});

}