【ターン】安定化機能及びスロットル機能

オリジナル住所ます。https：//zhuanlan.zhihu.com/p/38313717

手ぶれ補正機能とスロットルは非常に似た概念であるが、彼らは同じシナリオではありません。

我々は彼らの深い理解のコンセプトで始まります。

私は手ブレ補正機能、デバウンスについてお話しましょう。実際には、「バウンスの」機械的スイッチ及びリレーからある概念（デバウンス）が誘導される基本的な考え方のうち1つの信号に複数の信号を結合することです。

SLRは、NABU温家宝一般的な場合には写真を撮る手ブレたときに写真を撮って、同様の概念を持っている携帯電話は、あなたが、多くのシートをクリックして合成手段をリードしたときにスマートフォンが連続撮影しているので、良い写真撮影ではありませんが、生成します張。JSに翻訳され、Nイベント内のアクションは``アクションにのみ有効ですプログラムによってトリガ唯一のイベントの後に無視できるようになるだろう。

コールバックは、これらのアクションが実行されなかったであろう、実行された場合のsetTimeoutの内部に包まれたターゲット・メソッド（アクション）、以下のアイデアの実現には、このメソッドは、コールバックイベントです。それを強制しないのはなぜ、私たちはてclearTimeoutに従事し、この方法では、このようなのsetTimeoutは実行されません！なぜてclearTimeoutそれは、我々はそれを削除する場合に、連続動作を必要とします！ユーザーまで、このイベントをトリガしません。だから、setTimeoutメソッドは、自然にこのメソッドを実装します。

そして、それは大きなパフォーマンスを消費アイデンティティを検証することであるならば、文字は、言及する価値が、あまりにも単純で、パフォーマンスの少ない消費であることを確認した場合にのみ、入力フレームの入力フォーマットを検証するために使用される任意の場所で使用する方法、あなたそれだけですべての170ms後に確認することができます。そして、あなたはこのようなものを必要とします。これは完全に自動化されたり、あなたの入力は、すべての350msのように、そしてまた、あなたがこれを必要とする、バックエンドは確かに消費する余裕がない、リストのデータのバックエンドを引き、頻繁に相互作用します必要があります。

関数デバウンス（FUNC、遅延）{
     VARのタイムアウト。
    リターン 機能（E）{ 
        にconsole.log（ "清除" 、タイムアウト、e.target.value）
        てclearTimeout（タイムアウト）。
        VaRのコンテキスト= この、引数= 引数
        はconsole.log（ "新的" 、タイムアウト、e.target.value）
        タイムアウト =たsetTimeout（関数（）{ 
          にconsole.log（ "----" ）
          func.apply（文脈、引数）; 
        }、遅延）
    }。
}。

VAR検証=デバウンス（機能（E）{
    console.log（ "変更"、e.target.value、新しい日付-0 ）
}、 380 ）; 

// 绑定监听 
document.querySelector（ "入力"）のaddEventListener（ '入力'、検証）。

このことを保証するすべての通常のユーザ入力できる文字を1、2トリガー一回。ユーザーが入力しまくるであれば、彼は一度3〜6文字入力トリガ冷酷なシステムにすることができます。

この方法の焦点は、それがユーザイベントは、それがアクションをトリガするトリガ、アクションがイベントで実行されなければならない阻害しないことです。

他のアプリケーション：ボタンのクリックイベントを提出します。

、スロットルでスロットルをご覧ください。コンセプトスロットリングを使用すると、水の流れは、あなたが水をゆっくりさせることができますすることはできません任せることはできない、川にダムを建設ダムを想像することができます。言い換えれば、あなたは、ユーザーのメソッドが実装されていないことはできません。ドライもしそうなら、それは、デバウンスです。この方法は、一定の期間に一度だけ実行ユーザーを与えるために、我々は、タイマーが最後に実行された時点を保存する必要があります。

 < div要素のid = 'パネル' スタイル= "背景：赤;幅：200pxの;高さ：200pxの" > 

 </ DIV >

機能スロットル（FN、threshhold）{
  VARのタイムアウト
  VARスタート= 新しい新A日;
  VAR threshhold = 160 || threshhold
  戻り 関数（）{ 

 VARのコンテキスト= この、引数=引数、CURR = 新しい新 A日（） - 0 
 
 てclearTimeout（タイムアウト）/ / 常にイベントコールバックを殺す
 IF（CURR -スタート> = threshhold）{ 
     はconsole.log（ "今"、CURR、CURR -スタート）// なお、減算した結果、ほぼ160程度 
     fn.apply（文脈、引数）// メソッドの実行一部のみ、この方法は、一定時間で行われる 
     スタート= CURR 
 }他の{
  //の方法からイベントで再び行うことができる可能 
     タイムアウトのsetTimeout（= 関数（）{ 
        fn.apply（文脈、引数）
     }、このアクションによって）; 
    } 
  } 
} 
VAR mouseMoveイベント=スロットル（関数（E）{ 
 コンソール。ログ（e.pageX、e.pageY）
}）; 

// バインドリスニング 
document.querySelector（ "＃パネル"）は、addEventListener （ 'のMouseMove'、のMouseMoveを）;

スロットル機能は、サイズ変更、touchmove、のMouseMove、スクロールとして、keyUpイベントより頻繁にトリガされ、入力よりもイベントに使用されます。throttle 強制機能は固定レートで実行されます。したがって、この方法は、アニメーション関連で使用されるシナリオに適しています。

あなたはまだ完全には理解できない場合 debounce や throttle 違い、あなたがに行くことができます。このページの 2の視覚的な比較を見て。

【ターン】安定化機能及びスロットル機能

おすすめ