디바운싱과 쓰로틀링

https://github.com/SeolSongWoo/WebStudyProject

GitHub - SeolSongWoo/SampleOAuth: www

 

디바운싱이란?

디바운싱이란 사용자가 이벤트를 몇 번이나 발생 시키든 이벤트 발생을 멈추고 지정된 시간까지 지난 후에야 이벤트가 한번만 실행 되도록 하는 기법이다.

디바운싱 예시

				let timer_id;
        function debouncing(func) {
            if(timer_id) {
                clearTimeout(timer_id);
            }
            timer_id = setTimeout(func,300)
        }
        function debounceing() {
            $('#DebouncCnt').text(parseInt($('#DebouncCnt').text()) + 1);
        }

        $('#DebouncingClick').click(() => {
            $('#ClickCnt').text(parseInt($('#ClickCnt').text()) + 1);
            debouncing(debounceing);
        });

사용자가 300밀리초 동안 버튼을 5번 클릭 했다고 가정해보자. 디바운싱은 클릭에 의한 이벤트 실행이 바로 되지 않는다. 디바운싱 시간이 300밀리초로 설정되어 있다면, 사용자가 클릭을 멈추고 300밀리초가 지나고 나서야 해당 함수가 한번만 실행된다. 이것은 마치 연이어 호출되는 함수들을 하나의 단일 이벤트로 만드는 것처럼 보인다. 따라서 사용자가 여러 번 클릭을 하면 마지막 함수만 호출하게 된다.

 

어디에 사용하는가?

예를들어 사용자가 짧은간격으로 여러번 클릭했다고 가정해보자, 유료API의 경우 호출횟수가 정해져있거나 무료API인 경우에도 key당 호출가능횟수는 정해져있다. 호출횟수를 무의미하게 버리지않기위해 도입된 기법이다.

 

쓰로틀링이란?

쓰로틀링은 사용자가 이벤트를 몇 번이나 발생 시키든 일정한 시간 간격으로 한번만 실행하도록 하는 기법이다.

쓰로틀링 예시

		let timer_id;

        function Throttling(func) {
            if(timer_id) {
                return;
            }
            timer_id = setTimeout(() => {
                func();
                timer_id = 0;
            },300)
        }
        function DelayFunction() {
            $('#ThrottleCnt').text(parseInt($('#ThrottleCnt').text()) + 1);
        }

        $('#DebouncingClick').click(() => {
            $('#ClickCnt').text(parseInt($('#ClickCnt').text()) + 1);
            Throttling(DelayFunction);
        });

사용자가 고의든 아니든 클릭에 의한 이벤트 실행을 연달아 호출했다고 가정해보자. 쓰로틀링은 마지막 함수를 기다리지 않으며, 첫 번째 클릭에 의한 이벤트만을 실행하고 주어진 시간 동안 나머지는 무시한다.