ボタンの重複クリックを防止するソリューションと考え方

Web開発では、ボタンをクリックしてフォームを提出し、フォームを繰り返し提出できないという問題がよく発生します.よくある解決策をまとめました.
次に、プロセス全体をシミュレートします.

  
      
          
          
      
      
        
  
              
        
  
      
      
        function fncSubmit(){  
            setTimeout(function(){  
                alert('    ');  
            },1000);  
        }  
        document.getElementById('btn-submit').onclick = fncSubmit;  
      
  

1原生js制御
ボタンの発行クリック後、ボタンの無効化

function fncSubmit(){  
            setTimeout(function(){  
                alert('    ');  
            },1000);  
            this.disabled = true;  
        }  

クリックイベントをトリガーした後、元のクリックイベントを上書きする方法

function fncSubmit(){  
            setTimeout(function(){  
                alert('    ');  
            },1000);  
            this.onclick = function(){};  
        }  

ボタンに変数フラグを追加

function fncSubmit(){  
            if(!this.isSubmit){  
                setTimeout(function(){  
                    alert('    ');  
                },1000);  
            }  
            this.isSubmit = true;  
        }  

2 jquery解縛クリックイベント
クリックイベントをトリガーした後、jqueryオブジェクトのバインドイベントをメソッド内で解除します.

$(function(){  
            $('#btn-submit').click(function(){  
                setTimeout(function(){  
                    alert('    ')  
                });  
                $(this).unbind('click',arguments.callee);  
            });  
        });  

もう1つの考え方は時間を取得して記録することであり,再度クリックすると時間間隔が1 sより大きい場合に有効である.

$("#btn-submit").click(function(){
    varlast=Date.now();
    returnfunction(){
       varnow=Date.now();
       if((now-last)>1000){
           btn.innerHTML=Number(btn.innerHTML)+1;
       }
       last=now;
    }
})();

添付:ajaxの重複コミット要求を防止する解決方法
 
一、重複提出の原因
AJAX提出データは非同期提出であるため、提出ボタンをクリックするとxmlhttprequestを通じてサーバに非同期要求を送信し、送信要求に処理時間がかかり、私たちが初めてクリックした要求がまだ完了していないうちに、次から次へと何度も提出され、同時以降に送信した要求同僚もバックグラウンド処理に送信された.この場合、データ読み込みであればあまり影響はありませんが、データのコミット保存やコミット後のマルチテーブルデータ処理に関わるとさらに面倒になるので、迷惑をかけないようにしておく必要があります.
二、繰り返し解決方法を提出する
1、提出対象がボタンであれば、ボタンにdisabledを設定することができ、この方法はボタンの提出に適応する.この方法は簡単で乱暴で、多くの人が使っている方法で、代わりに以下のようにする.
 

$("input[type=submit]").attr('disabled',true)//        AJAX            

$.ajax({

url:'/post.php'

data:{a:1,b,1}

success:function(){

$("input[type=submit]").attr('disabled',false)//              

},

error: function(){

$("input[type=submit]").attr('disabled',false)//  AJAX               ，               ，            

}

})

以上のボタンの処理により、重複コミットの問題が回避されます.
2、ボタン以外のオブジェクトの提出
データをコミットするときにfromがなく、単一のフォームコンポーネント(input、textarea、radio、checkboxなど)しかない場合があります.そのため、通常のオブジェクトにはdisabledプロパティがないため、重複コミットを防止するために他の方法が必要です.

var post_flag = false; //             AJAX  

function post(){

if(post_flag) return; //           ，    

post_flag = true;//             

$.ajax({//  AJAX    

url:'/post.php'

data:{a:1,b,1}

success:function(){

post_flag =false; //                  

},

error: function(){

post_flag =false; //AJAX                

}

})

}

上記の方法があれば、ほとんどの非同期リクエストを繰り返す問題が解決され、方法はすでに教えられており、初心者の子供靴に役立つことを望んでいます.
 
 
フロントエンドは毎日1題で、あなたを高級フロントエンドの道に連れて行きます!毎朝9時ごろにタイトルと前日の答えを更新します!
githubアドレス:https://github.com/qappleh/Web-Daily-Question/
Webプログラマーに必須のマイクロ信号をお勧めします
▼
Webナイトレッスン
マイクロ信号:ydhlwnxs
推薦理由:web開発者が注目している公衆番号は、もっと知識を勉強すれば、コードを1行少なく書くことができます.技術資源の分かち合い、経験交流、最新技術の解読に専念し、また大量の無料電子書籍と一連の学習資源があり、web夜読授業に注目し、技術の先駆者となっている.
▼下↓↓↓QRコード認識注目