抗遠位再送信（スロットル機能）

アプリケーションのシナリオ

クラシック使用シナリオ：JSイベント、など：さらにonResize、スクロール、のMouseMove、mousehoverなど。

また、例えば：振戦、間違った手の前に繰り返しクリックすると、サーバが応答しません。

これらは無意味で、繰り返し不正な操作、システム全体への影響はまた、致命的なことができ、我々は繰り返す必要がありますので、イベントは適切な治療をクリックして設定します！

スロットル機能

いわゆるスロットリング機能名が示唆する、制限時間繰り返し呼び出しの関数です。

同様に、スロットル機能は、複数の実装スロットリング機能を重複して提出を防止しながら、重複送信機能の問題を解決することです。

メソッドの概要

実際に私の仕事を終え、この論文では、感触jsはあなたとここの方法、および共有を使用することは比較的容易で、重複送信を防ぎます。

A、のsetTimeout +てclearTimeout（スロットル機能）

通常の絞り機能及びスロットル機能クロージャ：本明細書で提供される2つの実装であります

第二に、セットされたフラグ/ JSロック

無効を介して第3、

第四に、そのような複数のクリックをロードしないようにする層としての浮遊層を追加

実現

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換" コンテンツ= "IE =縁" > 
    < タイトル>ドキュメント</ タイトル> 
</ ヘッド> 
< ボディ> 
    <= "幅：200pxの、高さ：100pxに、背景：赤;" ID = "テスト" > hahaahahhah </ DIV > 
</ ボディ> 
< スクリプト> 
    // ------------------------闭包节流函数- ----------------------- 
    VaRのスロットル=  関数（FN、遅延）{
         VAR タイマ=  NULL ;
        戻り 関数（）{
             VARの引数= 引数。// 参数集合
            てclearTimeout（タイマー）。
            タイマー= setTimeoutメソッド（関数（）{ 
                fn.apply（この、引数）。
            }、遅延）。
        } 
    } 
    関数postFun（名）{ 
        にconsole.log（1 ）
    } 
    VAR T = スロットル（postFun、1000 ）。
           
    document.getElementById（' テスト' ）.onclick =  関数（）{ 
        T（）; 
    } 

    // ------------------------普通节流函数------------------- ----- 
    関数スロットル（FN、遅延）{
         場合（fn._id）{ 
            てclearTimeout（fn._id）。
        } 
        Fn._id = window.setTimeoutは（（）=> { 
            のFn（）; 
            fn._id =  NULL ; 
        }、ディレイ）; 
    } 
    関数postFun（）{ 
        にconsole.log（1 ）
    } 
    のdocument.getElementById（' テスト' ） .onclick =  関数（）{ 
        スロットル（postFun、1000年）; 
    } 


    // ----------------------- ----単純絞り関数法-------------------- 
    VAR タイマー= 。ヌル
     のdocument.getElementById（' テスト' ）.onclick =  関数（）{
         場合（！てclearTimeout（タイマー）のタイマー）。
        タイマー= setTimeoutメソッド（関数（）{ 
            にconsole.log（1 ）
        }、1000年）
    } 

    // 设定フラグ/ JS加锁
    VARのロック=  偽。
    jQueryの（" #submit " ）.on（' クリック' 、機能（）{
         場合（ロック）{
             戻り 偽。
        } 
    　　 ロック=  真。
        jQuery.post（URL、データ、関数（応答）{
             // TODO：业务代码
            ロック=  偽; 
        }）; 
    }）; 
</ スクリプト> 
</ HTML >

概要は、
フォームが送信される場合には、複数のトリガイベントを防ぐためであれば、より便利にする前に、二つの方法を実装し、後者の二つは比較的、実装する複雑さ、我々は、より慎重な2の適度な使用をクロージャの使用をお勧めします。