쓰로틀링 vs 디바운싱

shong1332·2021년 7월 30일
0

스터디

목록 보기
2/5

throttling

  1. 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
  2. 마우스를 움직이거나 스크롤을 올리고 내릴때 자주 사용하게 됨
  3. 실항 횟수에 제한을 거는 특성이 있음
  4. 정기적으로 실행을 해주어야 하는 함수에 사용하면 유용할 때가 있음

debouncing

  1. 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는것
  2. 오늘 수업에선 검색과 관련하여 디바운싱 기능을 활용함
  3. 검색어 자음모음 하나당 api요청이 나가는것을 방지해주며 쿼리의 남용을 막아줌

    lodash 라는 라이브러리로 쉽게 구현해보았다.
    1 . getDebounce 함수를 실행하는 getDebounce에 쿼리를 통해 받아온 페치 데이터를 넣어주고
    2 . getDebounce를 onChangeSearch에 넣어주고
    3. getDebounce 값은 500ms 동안 다른 이벤트가 발생되지 않을시 onChangeSearch 함수가 실행되어 setKetword state에 값을 바꾸어준다.

profile
히히히

0개의 댓글