Throttling & Debouncing

김루루룽·2022년 4월 10일
0

React, Next.js

목록 보기
12/42

debouncing

특정 작업이 특정 시간내에 작업되지 않으면 실행하는 방법
ex)검색

lodash를 활용한 디바운스

_.debounce(() => {실행할 함수}, 시간설정)

2초동안 아무작업이 없으면 함수를 실행한다

검색에 걸린 거 색 다르게 하기

단어를 쪼개서 span tag에 넣어준다. (split)

그런데 사용자는 # 이라는 걸 안쓰니까
replaceAll로 대체해준다.

1. 키워드라는 스테이트를 만든다
2. replaceAll과 split을 활용해서 나눠준다.

throttling

먼저 1번 실행하고 특정 시간동안 무시.
함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것.
ex)무한 스크롤

요청, 혹은 이벤트가 의도한 바 보다 너무 과도하게 발생할 때, 일정 delay를 주고, delay동안은 수도꼭지를 조여버리는 것.

그 기간동안 발생한 이벤트, 요청, 함수 등은 무시가 되는 것이다.

출처

profile
1day 1push..plz

0개의 댓글