Clever Geek Handbook

Javascript最適化マイクロパターン：デコレーターのデバウンスとスロットル

関数デコレータを使用すると、関数の動作を変更せずに追加できます。 元の関数と装飾された関数のシグネチャはまったく同じです。





デバウンス



文字通り翻訳された場合-「バウンスの除去」。 このようなデコレータを使用すると、特定の時間内に複数の関数呼び出しを1つの呼び出しに変えることができ、新しい呼び出しが試行されるたびに遅延がカウントし直されます。 次の2つのオプションが可能です。

  1. 実際の呼び出しは、最後の試行から遅延以上の時間が経過した場合にのみ発生します。
  2. 実際の呼び出しはすぐに発生し、他のすべての呼び出し試行は、最後の試行からカウントされた遅延以上の時間が経過するまで無視されます。

使用する



debouncedFn = $.debounce( fn , timeout , [ invokeAsap ], [ context ]);







使用例



たとえば、あなたは提案しています。 各keyup



へのサーバーリクエストのkeyup



無駄であり、不要です。 ハンドラーをデコレートして、ユーザーがキーを押すのを停止した後にのみ機能するようにできます。たとえば、300ミリ秒です。

function onKeyUp() { ... };



$( 'input[name=suggest]' ).keyup($.debounce(onKeyUp, 300));



* This source code was highlighted with Source Code Highlighter .





または、複数のイベントに対して1つのハンドラーがあり、両方のイベントがしばらく発生した場合、ハンドラーは最後に発生したイベントでのみ機能する必要があります。

$( 'input' ).bind( 'keyup blur' , $.debounce(process, 300));



* This source code was highlighted with Source Code Highlighter .





調整



このデコレータを使用すると、関数を「ブレイク」できます。関数は、この期間中に何度も呼び出される場合でも、指定された期間に1回しか実行されません。 つまり すべての中間呼び出しは無視されます。



使用する



throttledFn = $.throttle( fn , period , [ context ]);





使用例



たとえば、ウィンドウのresize



（または、たとえばmousemove



）では、何らかの重いハンドラーが機能します。 あなたはそれを「壊す」ことができます：

$(window).resize($.throttle(doComplexomputation, 300));



その結果、関数は300ミリ秒ごとに1回しか実行されません。



これらのデコレータのjQueryプラグインとしての実装は、 code.googleからダウンロードできます。



追伸 Nicholas Zakasの著書、 Web Developers向けのプロフェッショナルJavaScript、第2版に触発されていますが、 debounce



とthrottle



混乱させ、最初の2番目を呼んでいます。 Ajaxianもこのトピックを取り上げました 。


More articles:


All Articles