Today I Learned

Debounce

: 디바운스는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다. 좀 더 쉽게 표현해보면 디바운스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 한다.

용도

• input 이벤트를 캐치하면서 유효성 검사를 하는 로직이 있다고 해보자. 이 때, input 이벤트가 발생할 때마다 매번 api를 호출한다면(유효성 검사) 이는 리소스 낭비라고 할 수 있다. input 이벤트는 알다시피 유저가 텍스트 등 인풋을 입력할 때마다 발생하기 때문이다. 하지만, 유효성 검사를 실행 해야하는 주요한 포인트는 사실 유저가 입력을 마쳤을 때이다(아이디를 yongkini로 하려고 했을 때, 유효성 검사는 'yongk'까지 됐을 때가 아닌 yongkini라고 끝까지 쳤을 때 이뤄져야 한다).
• 버튼을 연속해서 클릭하는 유저를 방지하기 위한 용도로 쓴다. 이것도 input 쪽과 마찬가지로 특정 버튼을 클릭했을 때 api를 호출하는 경우에 쓰면 좋을 것 같다. 예를 들어, 트래픽을 많이 일으키는 api가 있을 때 이 api를 호출하는 버튼에 대해 디바운스를 걸어놓으면 한번만 호출할 수 있도록 하는 것이다. 약간 번외?의 생각인데 수강 신청 버튼에 디바운스를 걸어놓으면,, 다들 멘붕이 오겠다..(광클하다가 수강신청 버튼을 누르지도 않은채 몇초가 지날 수 있기에..)
• scroll, resize 이벤트 등 연속으로 많이 발생하는 이벤트에 대해 걸어주면 좋을 것 같다.

직접 제작 및 관련 모듈

직접 제작

1) 버튼 관련 적용(쓰로틀도 포함)

2) input 이벤트에서 유효성 검사를 할 때의 상황

** 추가로 scroll 이벤트와 관련된 디바운스도 포함시켜 봤다.

let scrollId;
window.addEventListener('scroll', function() {
  if(scrollId) clearTimeout(scrollId);
  scrollId = setTimeout(function() {
    console.log('scrolled')
  },500)
})

관련 모듈

• Underscore의 debounce 함수
• Lodash의 debounce 함수

import { debounce } from 'lodash';

const onChange = () => {
	console.log("Something changed);
	lodashDebounceOnChange();
};

const lodashDebounceOnChange = debounce(() => {
  console.log("something activated");
}, 500);

Throttle

: 쓰로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다. 내 식대로 풀어써보면 연속으로 이벤트가 발생해도 정해진 간격의 호출 주기를 유지하도록 하는 것을 의미한다. 디바운스는 연속해서 클릭하는걸 무시하다가 끝에 발생하는 한번의 이벤트를 캐치하도록 한다면, 쓰로틀은 연속해서 이벤트가 발생해도 이벤트에 따른 특정한 callback의(이벤트 핸들러의) 호출 주기를 유지하도록 한다.

용도

• 앞서 말한 debounce의 용도 중 하나인 scroll 이벤트의 무지성 호출(?)을 막을 때 쓴다(scroll 관련한 인피니트 스크롤 등).

직접 제작 및 관련 모듈

직접 제작

1) debounce 쪽에서 같이 제작했으므로 해당 codeSandBox를 참고한다.
2) scroll 관련

let scrollId;
window.addEventListener('scroll', function() {
  if(scrollId) return;
  scrollId = setTimeout(function() {
    console.log('scrolled')
    scrollId = null;
  },500)
})

관련 모듈

• Underscore의 throttle 함수
• Lodash의 throttle 함수