[Tech] Debounce(디바운스)와 Throttle(쓰로틀)

Debounce와 Throttle이 필요한 이유?

Debounce와 Throttle은 DOM 이벤트를 기반으로 실행하는 자바스크립트 이벤트를 제어하기 위해 필요하다. 즉, 불필요한 호출을 방지하기 위해 사용하는 것이다.

먼저 아래의 예시를 한 번 보자. 스크롤을 내릴 때, 엄청나게 많은 이벤트가 발생하게 되면서 그 이벤트에 대한 콜백(callback)이 발생하게 된다. 그렇게 되면 그 콜백을 수행하기 위한 리소스가 많이 사용되고 따라서 성능적인 이슈가 발생할 것이다.

그렇다면 Debounce와 Throttle은 어떻게 동작하는 걸까?

Debounce

Debounce는 이벤트를 그룹화하여 일정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다. 예시로 시간을 200ms로 두고 작업을 진행해 보았다. 일정 시간의 타이머를 걸고, 일정 시간 동안 스크롤 이벤트 요청이 없으면 그때 이벤트를 발생 시키고, 일정 시간 이전에 스크롤이 발생하면 이전 타이머는 취소하고 새로운 타이머를 다시 설정한다.

window.addEventListener('scroll', function(){
  if(timer){
      clearTimeout(timer);
  }
  timer = setTimeout(() => {
      console.log('Scroll event');
  }, 200);
});

 브라우저에서 동작을 확인해 봤을 때, 현저하게 이벤트 발생이 줄어든 것을 볼 수 있는데, 이게 Debouncing을 적용한 예시이다.

Throttle

Throttle은 이벤트를 일정한 주기마다 발생하도록 하는 기술이다. Debounce와는 다르게 일정 주기마다 정기적으로 실행을 보장하게 된다. Debounce와 마찬가지로 200ms 주기를 걸어두고, 타이머가 설정되어 있으면 아무 동작하지 않고, 타이머가 없다면 타이머를 설정한다. 타이머는 일정한 주기 후에 스스로를 해제하고, 이벤트를 발생시킨다.

var timer;
window.addEventListener('scroll', function(){
  if(!timer){
    timer = setTimeout(() => {
	timer = null;
        console.log('Scroll event');
    }, 200);
  }
});

 브라우저에서 동작을 확인해봤을 때,  마찬가지로 이벤트 발생이 줄어든 것을 볼 수 있는데, 이게 Throttling을 적용한 예시이다.

 위의 예시는 설명을 위한 코드로 실무에 적용하거나 사용할 때는 Underscore 혹은 Lodash의 함수 사용을 권장한다고 한다.

Reference

• https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa

https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa

• https://webclub.tistory.com/607