スロットル
ここで話しているスロットルは、関数のスロットリングを意味します。簡単に言えば、関数呼び出しの周波数コントローラーは、時間間隔制御を継続的に実行することです。次のような主なアプリケーションシナリオ:
1。マウス移動イベント
2。DOM要素の動的な位置付け、ウィンドウオブジェクトのイベントのサイズ変更およびスクロールイベント
一部の人々は、上記の事件を機関銃の範囲と鮮明に比較します。スロットルは、機関銃の引き金です。トリガーを入れないと、発砲を続けます。開発中に使用した上記のイベントにも同じことが言えます。マウスをリリースしないと、そのイベントは常にトリガーされます。例えば:
コードコピーは次のとおりです。
var resizetimer = null;
$(window).on( 'resize'、function(){
if(resizetimer){
ClearTimeout(Resizetimer)
}
Resizetimer = setimeout(function(){
console.log( "ウィンドウサイズ");
}、400);
デバウンス
デバウンスはスロットルに非常に似ています。 debounceは、自由時間が特定の値以上でなければならない場合に実行される方法です。デバウンスは、自由時間の間隔制御です。たとえば、オートコンプリートを実行する場合、テキストを入力するときにメソッドを呼び出す時間間隔を制御する必要があります。一般に、最初の入力文字はすぐに呼び出しを開始し、実行された方法は特定の時間間隔に従って繰り返し呼び出されます。特定の入力を差し引いたり、入れたりしないなど、異常な入力に特に役立ちます。
デバースの主なアプリケーションシナリオは次のとおりです。
テキスト入力キーダウンイベント、キーアップイベントなど、オートコンプリート
underscore.jsなど、このタイプのオンラインには多くの方法があります。 jQueryには、スロットルとデバウンス用のプラグインもあります:jQueryスロットル/デバウンス。すべての原則は同じであり、同じ関数が実装されています。これは、私が再び使用している別のスロットルとデバウンス制御機能を示します。
コードコピーは次のとおりです。
/*
*周波数制御戻り機能が連続的に呼び出されると、FN実行周波数は毎回実行される回数に制限されます
* @param fn {function}呼び出す必要がある関数
* @param Delay {number}ミリ秒単位で遅延時間
* @param intierm {bool} falseを即時パラメーターに渡し、バウンド関数が最初に実行されてから実行されるのではなく、実行されます。
* @return {function}実際に関数を呼び出します
*/
var throttle = function(fn、delay、incime、debounce){
var curr = +new date()、//現在のイベント
last_call = 0、
last_exec = 0、
タイマー= null、
diff、//時差
コンテキスト、//コンテキスト
args、
exec = function(){
last_exec = curr;
fn.Apply(Context、Args);
};
return function(){
Curr = +new Date();
コンテキスト=これ、
args = arguments、
diff = curr-(debounce?last_call:last_exec) - 遅延;
ClearTimeout(タイマー);
if(debounce){
if(即時){
Timer = setimeout(exec、delay);
} else if(diff> = 0){
exec();
}
} それ以外 {
if(diff> = 0){
exec();
} else if(interime){
Timer = setimeout(exec、-diff);
}
}
last_call = curr;
}
};
/*
*アイドル制御戻り機能が連続的に呼び出される場合、FNが実行される前にアイドル時間は遅延以上でなければなりません。
* @param fn {function}呼び出される関数
* @param Delay {number}自由時間
* @param intierm {bool} falseを即時パラメーターに渡し、バウンド関数が最初に実行されてから実行されるのではなく、実行されます。
* @return {function}実際に関数を呼び出します
*/
var debounce = function(fn、delay、incime){
returnスロットル(fn、遅延、即時、真);