JavaScriptのスロットルとデバウンスの簡単な分析_基礎知識

スロットル

ここで話しているスロットルとは、機能のスロットルを意味します。関数呼び出しの頻度制御は、より簡単に言うと、連続実行時間間隔制御です。主なアプリケーション シナリオは次のとおりです。

1. マウスの移動、mousemove イベント
2. DOM 要素の動的配置、ウィンドウ オブジェクトのサイズ変更およびスクロール イベント

誰かが上記の出来事を機関銃の発砲に例えました。スロットルは機関銃の引き金であり、引き金を放さなければ発砲し続けます。開発中に使用する上記のイベントにも同じことが当てはまります。マウスを放さないと、イベントが発生し続けます。例:

コードをコピー コードは次のとおりです:

var assignTimer=null;
$( window).on('resize',function(){
if(resizeTimer){
clearTimeout(resizeTimer)
}
ResizeTimer=setTimeout(function(){
console.log( "ウィンドウのサイズ変更");
},400);

デバウンス

デバウンスはスロットルとよく似ています。デバウンスは、アイドル時間が特定の値以上である必要がある場合にのみ呼び出しメソッドが実行されることを意味します。デバウンスはアイドル時間のインターバル制御です。たとえば、オートコンプリートを行う場合、テキストを入力するときにメソッドを呼び出す間の時間間隔を適切に制御する必要があります。通常、最初の入力文字はすぐに呼び出され、実行メソッドは一定の時間間隔で繰り返し呼び出されます。特定の建物を長押しするなどの異常入力に特に有効です。

デバウンスの主なアプリケーション シナリオは次のとおりです:
オートコンプリートなどのテキスト入力キーダウン イベント、キーアップ イベント

この種のオンライン メソッドは多数あります。たとえば、Underscore.js はスロットルとデバウンスをカプセル化します。 jQuery には、スロットルおよびデバウンス プラグインもあります。jQuery throttle / debounce はすべて同じ原理で、同じ機能が実装されています。これは私が使用している別のスロットルとデバウンス制御関数です:

コードをコピーします コードは次のとおりです:

/*
* 頻度制御リターン関数を連続して呼び出す場合、fn の実行頻度は毎回 1 回に制限されます
* @param fn {function} 呼び出す必要がある関数
* @param late {number} ミリ秒単位の遅延時間
* @param immediate {bool} 即時パラメーターに false を渡すと、バインドされた関数が遅延の後ではなく最初に実行されます。
* @return {function}実際に関数を呼び出します
*/
var throttle = function (fn, late, immediate, debounce) {
var curr = new Date(),//current events
last_call = 0,
last_exec = 0,
timer = null,
diff, //時間差
context,//context
args,
exec = function ( ) {
last_exec = curr;
fn.apply(context, args);
};
return function () {
curr= new Date();
context = this ,
args = argument,
diff = curr - (debounce ? last_call : last_exec) - late;
clearTimeout(timer);
if (debounce) {
if (immediate) {
timer = setTimeout(exec,遅延);
>= 0 ) {
exe(); 🎜> last_call = curr;
}
};

/*
* アイドル制御復帰関数を連続して呼び出す場合、アイドル時間は遅延以上である必要があり、fn が実行されます
* @param fn {function} 呼び出される関数
* @ param late {number} アイドル時間
* @param immediate {bool} 即時パラメーターに false を渡します。バインドされた関数は、遅延の後ではなく、最初に実行されます。
* @return {function}実際に呼び出される関数
*/

var debounce = function (fn,layed,immediate) {
return throttle(fn,laye,immediate,true) ;