安定化入力とスロットル入力ボックスを達成するために反応

1.なぜ使用の画像安定化およびスロットル
などのkeydownからkeyup頻繁にイベントとして頻繁にトリガイベントのトリガイベントページケイトンはのパフォーマンスに影響する場合、数回のクリック

2.手ぶれ補正機能（デバウンスを）：セクションの機能は、期間中に一度だけ実行されます流れ（スロットル）：実行間隔イベント

3.利用シーン
機能画像安定化：検索ボックスや他の 
スロットリング機能：マウスクリックイベントを継続

4.目的

パフォーマンスを向上させ、ユーザーの利便性を向上させます

5.安定化を達成するためにスロットルをと反応します

「REACT」コンポーネント{から}インポートを、反応; 
UnDebounceクラスを拡張するコンポーネント{ 
  コンストラクタ（小道具）{ 
    スーパー（小道具）; 
    this.state = { 
      れるtimerId：NULL、//タイマーの整数でタイマーをキャンセルします
    } 
  } 

  //模倣AJAXリクエストを
  AJAX =（コンテンツ）=> { 
    にconsole.log（ 'AJAX：' +コンテンツ）
  } 

  デバウンス=（FN、ディレイ= 3000）=> { 
    //実行間隔スロットル
    復帰（...残り）=> {//引数なしで機能を矢印...代わりにそう休ま
      ; LETの引数= REST 
      IF（this.state.timerId）てclearTimeout（this.state.timerId）; // this.timerIdを使用直接れるtimerId =ヌルVARを定義しない。
      this.state.timerId =のsetTimeout（（）=> { 
        fn.apply（この、引数） 
      }、ディレイ）
    }
 
  } 

  => {//スロットル=（3000のFn、ディレイ=）
    間隔//スロットル時に
    trueにLET = canrun; 
    リターン（REST ...）=> { 
      IF（canrun！）戻り; 
      canrun = falseに; 
      のsetTimeout （（）=> { 
        fn.apply（この、REST）; 
        canrun = trueに; 
      }、ディレイ）

    } 
  } 

  onUndebounceKeyUpClick =（E）=> {//限りキー押しは一般に、AJAX要求リソースの浪費を生じるように起こります入力データが完全な文字要求しない場合に
    this.ajax（e.target.value）を
  } 


  onDebounceKeyUpClick =（E）=> {//デバウンスが頻繁に入力した後に要求を送信した後に添加
    debounceAjax = this.debounceせ（this.ajax、3000）
    debounceAjax（e.target.value）
  }

  onThrottleKeyUpClick =（E）=> { // AJAX 我々は、設定された時間に続く、すべてが1秒後に行われる
    throttleAjax = this.throttle（this.ajax、3000）とします。
    throttleAjax（e.target.value）
  } 
  （レンダリング）{ 
    リターン（
      <DIV> 
        正常入力：<入力onKeyUpを= {this.onUndebounceKeyUpClick} /> 
        防抖动的入力：<入力onKeyUpを= {this.onDebounceKeyUpClick} /> 
        节流的入力：<入力onKeyUpを= {this.onThrottleKeyUpClick} /> 
      </ div> 
    ）。
  } 
} 

輸出デフォルトUnDebounce。