メールの検証を送信して、後ボタンのカウントダウン、リフレッシュのカウントダウンの失効を防止します

シーンの適用
「メール認証の送信」機能を開発する際には、悪意や頻繁なメール認証コードの送信を防止する問題を解決します.一般的な原理は「送信ボタンをクリックするとajax要求をサーバに送信してメール認証コードを送信し、成功すれば送信ボタンをクリック不可に設定し、タイマーを呼び出し、ボタンにカウントダウンを表示する」ことです.このようにカウントダウンストレージを処理しないと、ページをリフレッシュするとカウントダウンが無効になり、ボタンをクリックすることができます.次のソリューションを提供します.

cookieストレージによるカウントダウン

HTML 5のlocalStorageを利用してカウントダウン

を記憶する.
クッキーストレージによるカウントダウン
送信に成功したら残りのカウントダウンをクッキーに保存し、ページがリフレッシュされたときに、クッキーが残りのカウントダウンを保存しているかどうかを確認します.もしあれば、送信ボタンはカウントダウン状態を維持し、クリックできません.そうしないと、送信ボタンはクリックできます.
HTMLコード

JQueryコード

    $(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");
      });
      

    });
    })