Debouncing & Throttling

연관 내용
[자동으로 검색하기]

Throttling

특정 시간 이내, 추가 입력이 있어도, 처음 1회만 실행한다.

• 먼저 1회 실행시키고, 지정한 기간 동안에는 추가 입력이 있어도 실행하지 않는다.

• 마지막 호출이 발생한 후 일정 시간이 지날 때까지 추가 입력이 없으면 그때 실행된다.

• 무한스크롤에 주로 사용한다.
  무한 스크롤은 스크롤을 내리면 추가 데이터를 refetch 해야한다.
  스크롤은 한번 내리면 엄청나게 많이 내려가기 때문에, refetch가 엄청나게 많이 일어나게 된다. 그래서 한번 내리게 되면 해당 시간 동안은 더이상 refetch가 일어나지 않도록 Throttling을 사용해야 한다.

Debouncing

특정 시간 이내, 추가 입력이 없으면, 마지막 1회만 실행한다.

• 어떤 작업이 있을 때, 특정 시간 내에 다시 그 작업이 반복되지 않으면 마지막에 한번만 실행한다.

• ex) 지정한 시간이 0.2초라면, 0.2초 안에 발생하는 것들은 모두 무시하는 것이다. 0.2초가 지나고 나서 한번 실행되는 것이다.

• 검색에 주로 사용한다.

• lodash 라이브러리로 구현할 수 있다.

• setTimeout으로 직접 구현할 수도 있다.