[Tistory] Throttle과 Debounce 이벤트 적용

[ 참고 블로그 ]

jQuery 스로틀(throttle) / 디바운스(debounce)

스로틀과 디바운스 라는 단어 검색을 하기까지는 행운이었던것 같다. 내가 갖고 있던 문제는 이거였다. cli...

https://blog.naver.com/lilis275/221565582049

$.throttle(delaytime_milisecond, function);

$.debouncd(delaytime_milisecond, function);

$("#id).unbind('click').bind('click', $.debounce(300, function() { 
        console.log("hello");
    })
);

다시 gpt 고 아래 정리!!

1. 쓰로틀과 디바운스 모두 해당 라이브러리 필요 - CDN을 사용할 경우

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

2. Throttle

처음 이벤트가 발생하고 이후 연속되는 이벤트를 무시한다.
Throttle는 연속적인 함수 호출을 제한하여, 지정한 시간 간격에 한 번씩만 함수를 
실행하도록 한다. 연속 이벤트가 발생해도 정해진 주기마다 함수를 실행하는 방식이다.

2-1. Throttle 사용이유

• Throttle은 사용자가 입력하는 속도가 빠를 때 유용하며, 입력이 자주 발생하는 상황에서 일정 시간 간격으로만 요청을 보내도록 할 수 있다.

• 중복 체크와 같은 경우, debounce가 일반적으로 더 적합하지만, 특정 요구 사항에 따라 throttle을 사용할 수도 있다.

2-2. Throttle 사용예시

// 1000ms(1초)마다 한 번씩만 실행
const handleScroll = _.throttle(() => {
    console.log('Fetching more data...');
}, 1000);

window.addEventListener('scroll', handleScroll);

• 스크롤 이벤트: 페이지 스크롤 시 너무 많은 이벤트가 발생하지 않도록 제한.

• 무한 스크롤: 스크롤이 일정 간격으로 발생할 때만 데이터를 불러옴.

3. Debounce

마구 유입되는 이벤트들을 무시하고, 마지막에 들어온 이벤트를 발생한다.
즉, Debounce는 연속적인 함수 호출을 일정 시간 동안 지연시키고, 특정 시간이 지나면 
마지막 호출을 실행하는 방식이다. 입력이 끝나고 일정 시간이 지나야 함수를 실행한다.

3-1. Debounce 사용이유

• 사용자 입력 지연 처리: 사용자가 입력을 멈추었을 때, 즉 keyup 이벤트가 멈춘 후 일정 시간 후에 중복 체크를 실행하도록 한다. 이로 인해 불필요한 요청을 방지하고 서버 부하를 줄일 수 있다.

• 서버 요청 최소화: 사용자가 입력할 때마다 서버에 요청을 보내는 대신, 입력이 멈춘 후에만 요청을 보내게 되므로, 서버 요청의 수를 줄일 수 있다.

3-2. Debounce 사용예시

// 사용자가 입력을 멈춘 후 300ms 동안 추가 입력이 없으면 실행
const handleSearch = _.debounce(() => {
    console.log('Searching...');
}, 300);

document.getElementById('searchInput').addEventListener('keyup', handleSearch);

• 자동완성 검색: 사용자가 입력을 멈출 때까지 서버 요청을 지연시킴.

• 윈도우 크기 조정: 윈도우 크기가 다 조정된 후에 이벤트를 처리함.

• 실시간 검색: 검색어를 입력할 때, 사용자가 입력을 마치기 전에 너무 많은 요청을 보내는 것을 방지.

• 폼 유효성 검사: 키 입력마다 검사를 하지 않고, 사용자가 입력을 멈춘 후에만 유효성 검사 수행.

3-3. Debounce 작동 방식

• 사용자가 입력할 때마다 일정 시간이 지날 때까지 기다렸다가 함수가 실행됩니다.

• 만약 그 시간 안에 추가 입력이 발생하면 타이머가 초기화되고 다시 시간을 기다리게 됩니다.

• 입력이 완전히 멈추면 타이머가 끝나고 함수가 실행됩니다.

4. 내 프로젝트에 적용 - Debounce 사용하기로 함!

"_"는 Lodash 라이브러리를 나타내는 네임스페이스
$는 jQuery 라이브러리를 나타내는 네임스페이스
jQuery 자체에는 debounce 함수가 없기 때문에, Lodash를 사용하거나 직접 구현해야 한다.

<!-- username 중복 체크 -->
    // 비밀번호 입력 필드에 keyup 이벤트 핸들러 추가
    $("#username").on('keyup', _.debounce(function() {
        console.log("Debounced event triggered"); // 디바운스 후 로그 출력
        // 입력된 비밀번호 값을 가져와서 콘솔에 출력
        console.log($(this).val());
        let username = $(this).val();

        $.ajax({
            url: '/username-check?username=' + username,
            type: 'GET'

        }).done((res) => {
            console.log("Res " + JSON.stringify(res));

            // 응답 구조에 따라 확인
            if (username === "") {
                // 입력란이 빈 경우 텍스트 숨기기
                $("#usernameError, #usernameSuccess").addClass("my_hidden").hide();
            } else if (res.body === "USER_EXIST") {
                showError(); // 에러 메시지 표시
            } else if (res.body === "USER_NO_EXIST") {
                showSuccess(); // 성공 메시지 표시
            }
        }).fail((res) => {
            alert("오류가 발생했습니다. 다시 시도해 주세요.");
        });
    }, 300));


    // 에러 메시지를 표시하고 성공 메시지를 숨기는 함수
    function showError() {
        $("#usernameError").removeClass("my_hidden").show();
        $("#usernameSuccess").addClass("my_hidden").hide();
    }

    // 성공 메시지를 표시하고 에러 메시지를 숨기는 함수
    function showSuccess() {
        $("#usernameSuccess").removeClass("my_hidden").show();
        $("#usernameError").addClass("my_hidden").hide();
    }
    <!-- username 중복 체크 끝-->

5. 적용 화면 (300 너무 빨라서 1초로 테스트)

[ Debounce 사용]

[ keyup 이벤트와 비교 ]