Debouncing, Throttling

디바운싱(debouncing)

특정 시간을 기준으로 해당 시간 내에 요청된 내용들 무시하는 개념. 쭉 실행하다가 마지막에 실행된다.

예를 들어 검색 프로세스에서 키워드를 입력할때마다 쿼리가 요청되면
(ex: ’안녕하세요’를 검색한다고 가정하면 ㅇ,ㅏ,ㄴ,… 칠때마다 쿼리 요청)
엄청난 비용을 지불해야 함→디바운싱으로 해결

디바운싱을 제공하는 라이브러리: Lodash
lodash는 setTimeout과 사용방법이 동일
import한 다음 debounce 함수를 호출

import _ from "lodash";
debounce(콜백함수, 시간)

쓰로틀링(throttling)

먼저 실행하고 특정 시간동안 기다리는 개념(delay)
delay 이내로 연속적으로 발생된 이벤트에 대해서는 무시한다.

검색할 때는 적합하지 않고 무한스크롤 같은 경우에 사용됨
ex: 무한스크롤 직접 만들 때 쓰로틀링을 적용하면 수많은 스크롤 이벤트에서 실행되는 fetchMore 요청 방지 가능