[js]Debounce , Throttling

[young-02]

디바운싱

빈번하게 발생하는 이벤트를 '특정 시간 이후에 한번만' 실행 시키는 최적화 기법

디바운싱 시간이 300밀리초 설정이 되어있다면 사용자가 클릭을 멈추고 300밀리초가 지나고 나서야 해당 함수가 한번만 실행된다.

사용자가 여러 번 클릭을 하면 마지막 함수만 호출하게 된다.

사용

• 검색어 자동완성 : 사용자가 입력을 중단할 때 까지 검색 결과에 대한 API를 호출 지연
• 양식 유효성 검사 : 사용자가 데이터 입력을 끝마친 뒤에 유효성 검사를 시작한다.(아이디나 패스워드를 다 입력하기도 전에 길이가 너무 짧다고 하지 않는다.)
• API 호출 속도 제한: API 호출이 너무 잦게 발생하면 서버에 부하가 가므로 디자운스로 호출을 제한한다.
• 실수 방지: 은행에서 송금 요청 버튼을 실수로 두번 클릭해도 마지막 한번에 대해서만 실제로 송금 요청

const clickBtn = doument.querySelector('#clickBtn')
const clickCnt = document.querySelector('#clickCnt')
const debouncingCnt = document.querySelector('#debouncingCnt')

let timerId

function debouncing(fnc, timeout = 300){
    clearTime(timerId)
    timerId = setTimeout(func, timeout)
}

function delayFunction(){
    debouncingCnt.innerHTML = parseInt(debouncingCnt.innerHTML) +1
}

clickBtn.addEventListener('click', ()=>{
    clickCnt.innerHTML = parseInt(clickCnt.innerHTML)+1;
    debouncing(delayFunction)
})

쓰로틀링

빈번하게 발생하는 이벤트를 '일정한 간격으로 한번만' 실행 시키는 최적화 기법

쓰로틀링은 마지막 함수를 기다리지 않으며, 첫 번째 클릭에 의한 이벤트만을 실행한고 주어진 시간 동안 나머지는 무시한다.

사용

• 무한 스크롤 : 사용자가 스크롤을 내렸을 때 실행되지만 스크롤로 인식된 모든 픽셀에 대해 요청을 보내진 않는다.
• 마우스 움직임 이벤트 : 마우스 움직임을 추적하지만 브라우저에 과부하가 걸리지 않도록 한다.
• 실시간 업데이트 : 잦은 업데이트가 도움이 되지만, 즉각적이어서는 안되는 경우에 유용

const clickBtn = doument.querySelector('#clickBtn')
const clickCnt = document.querySelector('#clickCnt')
const debouncingCnt = document.querySelector('#debouncingCnt')

let timerId

function throttling(func, timout = 300){
    if(timerId){
        return
    }

    timerId = setTimeout(()=>{
        func()
        timerId = undefined
    },timeout)
}

function delayFunction(){
    throttlingCnt.innerHTML = parseInt(throttlingCnt.innerHTML) +1
}

clickBtn.addEventLsitener('click' ,()=>{
    clickCnt.innerHTML = paserInt(clickCnt.innerHTML) +1 
    thottling(delayFunction)
})

차이점

• 실행빈도
  • 쓰로틀링: 일정 시간안에 한번은 실행되다
  • 디바운스: 일정 시간동안 중복 호출이 없어야만 실행
• 사용자 피드백
  • 쓰로틀링: 즉각적인 피드백을 제공해 스크롤과 같은 작업에 유용
  • 디바운싱 : UI의 반응성을 떨어트리지만 작업이 완료될 때까지 함수 호출을 방지하려는 경우에 유용
• 복잡성
  • 쓰로틀링:일반적으로 함수 호출만 제한하므로 구현이 간단
  • 디바운싱: 타이머와 더 복잡한 로직이 필요
• 권장사항
  • 쓰로틀링 : 시간에 민감한 작업
  • 디바운싱 : 시간에 민감하지 않는 작업

라이브러리

• Lodash : 고도로 최적화된 디바운스 및 쓰로틀링 제공
• Underscore.js

[young-02]

https://onlydev.tistory.com/151