javascript - jquery验证码倒计思路问题

问题描述

问 题

http://jsbin.com/xoqizaxecu/edit?html,css,js,output

$(".huoqu").on("click",function(){
 var $this=$(this);
$this.addClass("gray");
var wait=10;
$this.html(wait+"s后获取");
  function fstime(){
    if(wait==0){
      $(".huoqu").removeClass("gray");
      $(".huoqu").text("获取验证码");
      wait =10;
    }else {
      console.log(wait);
        $this.addClass("gray");
      $(".gray").html(wait+"s后获取");
      wait--;
    }
  }
  setInterval(fstime,1000);
});

<span class="huoqu">获取验证码</span>

为什么wait还在无限循环？
console.log 控制台里面 0之后又重新继续计算？
验证码逻辑我问题出在哪句？
如何实现验证码业务问题？

解决方案

你没清除定时器clearInterval

var time ;
$(".huoqu").on("click",function(){
 var $this=$(this);
$this.addClass("gray");
var wait=10;
$this.html(wait+"s后获取");
  function fstime(){
    if(wait==0){
      clearInterval(time);
      $(".huoqu").removeClass("gray");
      $(".huoqu").text("获取验证码");
      wait =10;
    }else {
      console.log(wait);
        $this.addClass("gray");
      $(".gray").html(wait+"s后获取");
      wait--;
    }
  }
  time = setInterval(fstime,1000);
});

这篇关于javascript - jquery验证码倒计思路问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！