Debouncing & Throttling

mangjell·2022년 4월 10일
0

디바운싱이란?

  • 디바운싱이란, 연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용된다.

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

디바운싱이 사용되는 대표적 예제로는 검색기능이 있다.

Debounce는 반복적인 동작을 강제적으로 대기하는 것을 말한다.

예를들어, 우리가 input에 onChange를 이용해 console.log()를 확인해 보면 우리가 하나하나 입력할 때마다 onChange가 실행된다.
(아래사진 참조)

  • 해결방안: Debounce사용!
import { debounce } from 'lodash';
import { debounce } from 'lodash';
export default function Test2() {
  
	const handleOnChange = debounce((e) => {
		console.log(e.target.value);
	}, 500);

	return (
		<>
			<input onChange={handleOnChange}></input>
		</>
	);
}

Debounce는 setTimeout과 사용방법이 똑같다. debounce(콜백함수, 시간)

첫 번째 인자로는 실행시키고 싶은 함수가 들어가고, 두 번째 인자로는 시간이 들어간다.

debounce는 우리가 두 번째 인자로 넣어준 시간 동안 아무 일도 하지 않았을 때 콜백함수를 실행시킨다.

즉, 우리가 무언가를 계속 입력하고 있으면 함수를 실행시키지 않고, 우리가 입력을 끝내고 가만히 있으면 그때 함수 결과를 보여준다.

Debounce 활용하는 곳?

  • 주로 검색을 할 때 사용할 수 있다. 우리가 검색을 할 때 엔터를 치지 않더라도, 사용자가 입력을 멈추고 일정 시간이 지나면 자동으로 함수를 실행시켜 검색 결과를 보여주는 것이다.

쓰로틀링이란?

  • 반면 쓰로틀링이란, 연이어 발생한 이벤트에 대해 일정한 delay를 포함 시켜, 연속적으로 발생하는 이벤트는 무시하는 방식으로 사용된다.

즉, 지정한 delay동안 호출된 함수는 무시한다.

쓰로틀링이 사용되는 대표적 예제는 스크롤 기능이 있다.
(예시)

profile
프론트엔드 개발자

0개의 댓글