JavaScript: Debounce, Throttling

[Hah-nna]

Debounce, Throttling

*예시는 lodash 라이브러리의 _debounce와 _throttling을 사용함

Debounce

연속해서 호출되는 함수들을 하나로 묶어 마지막 함수만 호출하게 하는 것 디바운스된 함수가 마지막으로 호출된 이후 설정한 일정 대기 시간만큼 함수 호출을 지연함

사용 예시

• 검색창에 검색어 입력
• 리사이즈 등

내가 사용한 debounce 사용 예시

``` import { useState, useEffect, useCallback } from 'react'; import debounce from 'lodash/debounce'; type WidthSize = { width: number; }; const useWidthResize = (): WidthSize => { const [width, setWidth] = useState({ width: window.innerWidth }); const handleWidthSize = () => { const newWidth = window.innerWidth; setWidth({ width: newWidth }); }; const handleWidthDebounce = useCallback(debounce(handleWidthSize, 200), []); useEffect(() => { window.addEventListener('resize', handleWidthDebounce); handleWidthSize(); return () => window.removeEventListener('resize', handleWidthDebounce); }, [handleWidthDebounce]); // console.log(width, '0.2초'); return width; }; export default useWidthResize; ``` 소록소록 프로젝트(무산되어버린...)를 할 때 미디어쿼리를 사용해 반응형 작업을 했으나 좀더 세밀하게 반응형 작업을 하기 위해 리사이징이벤트에 디바운스를 적용해서 마음에 들게 반응형 작업을 했었음 기존의 리사이징 이벤트를 그냥 사용한다면 화면의 크기가 계속 달라질 때마다 이벤트가 계속 발생함 -> 비효율적임 0.2초후의 사이즈를 state에 저장하고 저장된 사이즈가 768 미만이면 다른 header를 보여주게 함 768 초과면 기존의 헤더를 보여줌 위 코드는 width를 감지하고 state에 저장하고 리사이징 이벤트는 디바운싱하는 커스텀훅임 위 커스텀훅을 아래와 같이 적용할 수 있음 ``` unction Header() { const [menu, setMenu] = useState(false); const setIsLoggedIn = useSetRecoilState(isLoggedInState); const { isDark, setIsDark, handleToggleDarkMode } = useDarkMode(); const navigate = useNavigate(); const windowWidth = useWidthResize(); /** * winddow 창의 width를 감지하는 커스텀 훅 * 미디어 쿼리 중 mobile_sm의 경우가 애매해서 사용하게 됨 */ // ...중략 return ( <> {windowWidth.width < 768 ? (

소록소록

) : (

소록소록

{LogIn ? ( <>

{menu && (

로그아웃

마이페이지

)} ) : (

로그인

|

회원가입

)}

)} ) ```

options

1. leading(default: false) leadingEdge 옵션을 사용하면 역으로 함수 발생 시점에 디바운스가 발생함 즉, 여러 함수가 발생하는 첫 시점에 이벤트가 발생하는 것임 그 이후 발생하는 연속되는 함수는 하나로 묶어서 처리됨

2. trailling(default: true) 함수가 마지막 이벤트가 발생한 후 설정한 시간(초)가 지난 후에 호출할지 여부

Throttling

마지막 함수가 호출된 이후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

options

1. leading(default: true) 설명은 debounce의 leading 옵션과 같음

2. trailling(default: true) 설명은 debounce의 trailling 옵션과 같음

사용 예시

• 무한 스크롤

[Hah-nna]

https://lodash.com/docs/4.17.15#debounce

[Hah-nna]

https://css-tricks.com/debouncing-throttling-explained-examples/