⚪️ [JS] setInterval, setTimeout이랑 비슷한 Throttle, Debounce

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

 

=> 0.25초 마다 반복해서 검사

=> didScroll이 true면 hasScrolled() 함수 실행하고 didScroll 을 false로 초기화 시켜라

 

 

비슷한걸 챗지피티가 알려줘서 기록용으로 써두기

나는 일단 처음 들어봄!

Throttle(쓰로틀) vs Debounce(디바운스)

=> setTimeout이나 setIntervla 처럼 js 기본 문법은 아니고 js로 구현가능한 개념

=> Lodash 같은 라이브러리로도 사용 가능

개념	설명	예시 상황
Throttle	일정 시간 간격으로만 함수 실행 (중간에 아무리 이벤트가 많이 발생해도 무시) => "계속 와도 내가 알아서 간격 두고 실행할게"	스크롤 이벤트, 윈도우 리사이즈 등
Debounce	마지막 이벤트가 발생하고 일정 시간 지났을 때 함수 실행 => "너 그만하고 좀 멈추면 그때 실행할게"	검색창 자동완성, input 입력 이벤트 등

Throttle 예시

let throttleTimer;
window.addEventListener('scroll', () => {
    if (!throttleTimer) {
        throttleTimer = setTimeout(() => {
            console.log('스크롤 중 실행!');
            throttleTimer = null;
        }, 200);
    }
});

 

=> 0.2초 뒤에 한 번만 실행

=> 그 사이 스크롤 계속해도 무시

=> setIntercal과 구조가 비슷함

=> ex) 스크롤, 리사이즈

 

 

Debounce 예시

let debounceTimer;
document.querySelector('input').addEventListener('input', () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        console.log('입력 끝났을 때 실행!');
    }, 500);
});

 

=> input 입력 끝난 후 0.5초 후에 실행

=> 입력 도중엔 실행 안 함

=> ex) 검색창 자동완성