[JS] 디바운싱과 쓰로틀링

디바운싱 Debouncing

연속으로 호출되는 함수 중 마지막에 호출되는 함수만 실행되도록 하는 것 (입력이 끝났을 시)

 

다음 코드와 같이 ajax 요청이 있을 경우 사용된다.

var timer;

document.querySelector('#input').addEventListener('input', function(e) {
    if(timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        // 실행 코드 내용
    }, 1000);
});

이벤트가 발생할 때마다 이전 내용을 clear 하고 새로운 타이머 설정한다

설정해둔 시간(1초) 내에 이벤트가 발생하지 않으면 코드를 실행한다

 

 

쓰로틀링 Throttling

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 (특정 시간마다 한 번)

 

대표적인 예로 스크롤이 있다. scroll 동작에서 빈번하게 실행되는 문제를 막기 위해 쓰로틀링을 사용한다.

var timer;
document.querySelector('.body').addEventListener('scroll', function (e) {
  if (!timer) {
    timer = setTimeout(function() {
      timer = null;
      // 실행할 코드 내용
    }, 1000);
  }
});

timer에 값이 없을 시 timer를 설정하고 일정 시간이 지난 후 작성한 코드를 실행한다.

중간 검색 결과를 보여주고 싶을 때 쓰로틀링을 사용할 수 있다.

 

 

 

디바운싱과 쓰로틀링 차이

디바운싱은 이벤트가 연속적으로 발생할때 특정 시간 동안 이벤트 발생이 없을 시 마지막 이벤트를 발생시키고 쓰로틀링은 설정한 특정 시간마다 주기적으로 코드가 실행된다

 

 

---

참고

[Javascript] 디바운싱과 쓰로틀링