Javascript - debounce/throttle/

Deboring/throttleとは?

volume、input、mousemoveなど、短時間で連続的に発生するものもあります.コミットボタンがあるとします.短時間でコミットボタンを複数回押してサーバリクエストを送信すると、サーバにオーバーロードが発生します.これらのイベントが多すぎると、ブラウザのパフォーマンスに非常に不利になります.アンインストールとスロットルは、過剰なイベントハンドルを制御するための技術です.

Debounce

debonseでは、複数のイベントが発生した後、指定した期間内に、イベントが発生しなくなった場合に、最後に発生したイベントのみを実行できます.例えば、debonse timeを300 msとして指定し、コミットボタンを100回素早くクリックしたと仮定し、100回クリックした後300 ms以内にイベントが発生しなくなった場合、1回のイベントの発生を許可する.100回クリックして300ミリ秒以内に別のイベントが発生した場合、debonstimeはリセットされ、前のように繰り返されます.

const debounce = (callback, delay) =>{
	let timerId;
   
   	 // delay 가 경과하기 전에 이벤트가 발생하면 시간을 초기화하고 새로운 시간이 주어진다. 다시말해서 		//delay 시간동안 여러 이벤트가 발생할 경우에는 callback 함수가 실행되지 않는다.  
   
   
   	//event 는 timerId 를 기억하는 클로저를 반환한다. 
   
    return event =>{
    if(timerId) clearTimeout(timerId);
    timerId = setTimeout(callback, delay, event);
    };

}

debonseは主にajaxリクエストの自動完了実装またはボタンの重複クリックを防止するために使用される.下線のdebonse関数またはlodashのdebonse関数を使用することを推奨します.

Throttle

throttleは、短時間間隔で連続的に発生するイベントをグループ化し、イベントハンドラを一定時間呼び出すための呼び出しサイクルを作成します.より簡単に言えば、指定された時間(delay)までコールバック関数を1回実行するまで、コールバック関数は一定期間実行されません.たとえば、スクロールイベントがあります.スクロールイベントはマウスの移動時に検出されます.マウスが移動し続け、スクロールイベントが連続して発生します.性能はどのくらい良いですか?指定した時間が400ミリ秒の場合、400ミリ秒前にマウスは検出されず、400ミリ秒後にマウスイベントハンドルコールバック関数が実行されます.コールバック関数が実行されると、時間が初期化されます.

const throttle = (callback,delay) =>{

let timerId;

return event =>{

//delay가 지나기 전까지는 아무 이벤트 (콜백함수) 가 실행되지 않다가 delay가 되어지면 콜백함수가 실행되어지고 시간이 초기화가 되어진다. 즉, delay 시간 간격마다 콜백함수가 한번씩 실행된다고 보면된다. 

if(timerId) return;

timerId = setTimout(()=>{
callback(event);
timerId = null;
}, delay,event);
};

};

throttleは、画像の無限スクロールやスクロールイベントなどのマウスまたはスクロールを検出します.
よく使われる技術です.Underscoreのスロットル関数やLoashのスロットル関数をよく使うそうです.