运用场景

在开辟“发送短信考证”功用时刻，要处置惩罚一个题目，防备歹意或频仍发送短信考证码题目。平常道理是“当点击发送按钮时，发送ajax要求到服务器发送短信考证码，胜利则把发送按钮设置为不可点击，而且挪用定时器，按钮显现倒计时”。假如就这样不对倒计时存储做处置惩罚，那末当革新页面，会涌现倒计时失效，按钮可点击。供应以下处置惩罚方案：

• 应用cookie存储倒计时

• 应用HTML5的localStorage 存储倒计时

应用cookie存储倒计时

发送胜利后把盈余倒计时存储到cookie，当页面革新时，搜检cookie 是不是还存储着盈余倒计时？，假如有，发送按钮则坚持倒计时状况，不可点击，不然发送按钮可点击。

HTML代码

<input type="button" id="btn" disabled="disabled" value="猎取考证码">

JQuery代码

<!--引入jquery.cookie.js 插件-->
<script src="http:jquery.cookie.js" type="text/javascript" charset="utf-8"></script>

<!--逻辑功用代码 -->
<script>
    $(function(){
               
      if($.cookie("total")!=undefined&&$.cookie("total")!='NaN'&&$.cookie("total")!='null'){//cookie存在倒计时
          
          timekeeping();
          
      }else{//cookie 没有倒计时
        
          $('#btn').attr("disabled", false);
      }
    
      function timekeeping(){
        //把按钮设置为不可以点击
        $('#btn').attr("disabled", true);
        var interval=setInterval(function(){//每秒读取一次cookie
          //从cookie 中读取盈余倒计时
          total=$.cookie("total");
          //在发送按钮显现盈余倒计时
          $('#btn').val('请守候'+total+'秒');
          //把盈余总倒计时减掉1
          total--;
    
          if(total==0){//盈余倒计时为零，则显现 从新发送，可点击
          //消灭定时器
          clearInterval(interval);
          //删除cookie
          total=$.cookie("total",total, { expires: -1 });
    
          //显现从新发送
          $('#btn').val('从新发送');
          //把发送按钮设置为可点击
          $('#btn').attr("disabled", false);
          }else{//盈余倒计时不为零
    
          //从新写入总倒计时
          $.cookie("total",total);
          }
    
        },1000);
    
      }
      //绑定发送按钮
       $('#btn').click(function(event) {
      /* Act on the event */


      // alert($("#btn").val());

      //校验手机号码
      var phone=$('#phone').val();
      var pre=/^[1][358][0-9]{9}$/;
      if(phone==''){
          layer.open({
              content: '手机号码不能为空',
              time: 2
          });
      
          return this;
      }else{
          var pre=/^[1][358][0-9]{9}$/;
          if(!pre.test(phone)){
            layer.open({
                content: '手机号码花样有误！',
                time: 2
            });
          
              return this;
          }
      }


      $.ajax({
        url: '',//服务器发送短信
        type: 'GET',
        dataType: 'json',
        data: {phone: phone},
      })
      .done(function(re) {


            var str="发送短信考证码胜利，请注意查看您的手机";
            // console.log(re);
            if(re){
               $.cookie("total",60);
               timekeeping();
            }else{
            
                switch (re[0]) {
                  case '160038':
                    
                    str="短信考证码发送过频仍";
                    break; 
                  case '160034':
                    
                    str="号码黑名单";
                    break; 
                  case '160000':
                    
                    str="体系毛病";
                    break;
                  case '000000':
                    
                    str="发送胜利";
                    break;
                  case '112300':
                    
                    str="吸收短信的手机号码为空";
                    break;  
                  case '160040':
                    
                    str="考证码超越发送上限";
                    break;
                  case '160042':
    
                    str="号码花样有误";
                    break; 
                 
                  default:
                    str="发送考证码失利";
                    break;
                }
            }
            

           layer.open({
                  content: str,
                  time: 2
              });
        
   
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
      

    });
    })
</script>