スタビライザー(デバウンス)とスロットル(スロットル)

シーンの説明:一般的に、我々は、れるonmousemove、スクロール、クリック要素を結合し、このようなフロントページなどのイベントのサイズを変更する、それがデータを取得するための要求を送信する場合、これらのイベントのために尽くします、私たちは無意識のうちに、サーバーとの連続クリックまたは連続スクロールを与えます多くの圧力に、私たちは連続関数の実行イベントのトリガイベントに行くときに、多くの場合、すべてを設定する必要があり、これは背景画像安定化であると発生するスロットル。

例えば:

< DIV ID = "コンテンツ" スタイル= "高さ:150ピクセル、背景色:#CCC;" > </ DIV >
コンテンツ=のdocument.getElementById LET( 'コンテンツ'); 

機能なFetchData(){ 
	 にconsole.log( 'テストデータI'); 
} 

content.onmousemoveなFetchData =();

  それが移動中であるときにマウスイベント関数がデータを要求し、実行する必要があると仮定すると、連続的にイベントをトリガーする、DIVを通過するときにコードが上記イベントDIV要素ONMOUSEMOVE結合し、それがサーバー上の不要な圧力が得られ、要求を開始しなければなりません。

図1に示すように、画像安定化

コンセプトは:n秒あれば、一度だけn秒で実行時間の後発を示し、イベントをトリガし、それが機能の実行時間を再計算します

手ぶれ補正機能は即時実行と非即時実行Editionバージョンに分かれています

(1)即時実装版

  これは、トリガイベント機能がすぐに実行された直後に行われ、以下を達成するために停止トリガn秒、後まで、関数が実行されることはありませんイベントn秒でトリガされたと仮定すると、n秒機能の効果を継続するためにイベントをトリガすることはできません。

関数デバウンス(funcが、待つ){ 
  タイマーをしましょう。
  復帰機能(){ 
    コンテキスト=これを聞かせて、
    引数の=引数を聞かせて。
    (タイマー)てclearTimeout(タイマー)であれば、
    聞かせてcallNow =タイマー!; //记录计时器是否结束
    タイマ=のsetTimeout(()=> { 
       時間= NULL;   
    }、待機)。
    (callNow){もし
         func.apply(文脈、引数)。
    } 
  } 
} 
context.onmouseover =デバウンス(なFetchData、1000)。

(2)非即時実行版

  n秒とは、イベントをトリガした場合、それは時間の実行機能を再計算します、n秒後にすぐに実行されていないトリガーイベント機能直後以外は、実行されますが、実行します。以下を達成するために:

関数デバウンス(funcが、待つ){ 
  タイマーをしましょう。
  復帰機能(){
    コンテックスは=これを聞かせて、
    引数の=引数を聞かせて。
    (タイマー)てclearTimeout(タイマー)であれば、
    タイマー=のsetTimeout(()=> {
      func.apply(コンテックス、引数);
    }、待機)
  }
}
context.onmousemove =デバウンス(なFetchData、1000) 

2、スロットル

  コンセプト:連続トリガーイベントを参照するには、唯一のn秒以内に行うことができます

  スタンプがある時間を達成するには2つの方法がありますが、調整、1は、タイマーを使用することです。

  (1)タイムスタンプ

スロットル機能(FUNC、待機){ 
  ましょう最終= 0; //最後のトリガータイムスタンプ
  リターン機能(){
    コンテックスはこれを=ましょう;
    letの引数の=引数;
    今聞かせて+ =新しい新しいDate(); //現在のタイムスタンプ
    であれば(今-最後>ウエイト){ // 実行されたときに長い待ち時間より間隔
      =最終今;
      func.apply(文脈、引数);
    }
  }
} 

  (2)タイマ

関数スロットル(funcが、待つ){ 
  タイマーをしましょう。
  復帰機能(){
    コンテキスト=これを聞かせて、
    引数の=引数を聞かせて。
    (!タイマー){もし
      タイマー=のsetTimeout(()=> {
        ;タイマー= nullを
        func.apply(文脈、引数)
      }、待ちます)
    }
  }
}

  

おすすめ

転載: www.cnblogs.com/qiyangliu/p/11374194.html