debounce란..?

이경준·2020년 12월 13일
0

throttling에 이어서 개념에 굉장히 헷갈리는 것중 하나이다.
일단 debounce는 이벤트가 발생하는동안 반복적으로 이벤트를 없애고 마지막이벤트의 가장최근 함수만 호출시키는 개념이다.
복습하자면 throttling은 일정시간동안 함수가 출력되지 않고 시간이지나면 출려되는 것이고, debounce는 반복적인 이벤트를 제거하다가 마지막 이벤트시 일정시간 뒤에 가장 최근 하나의 함수만 출력시키는 것이다.

연습1) input창에 작성된 글자가 작성이 끝난 후 0.4초후에 출력시키자

input.addEventListener("input", function (event) {
  setTimeout(function () {
    console.log(event.target.value);
  }, 400);
});

일단 위에 코드는 0.4초 후에 input내용의 변경이 모두 출력이 될것이다.
즉 0.4초 후 갑자기 엄청 많은 출력이 이러난다.


let timer = null;

input.addEventListener("input", function (event) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function () {
    console.log(event.target.value);
  }, 400);
});

결과는 작성이 끝난 후 0.4초 후에 한번 출력된다.
코드를 보면 처음 if문은 조건이 성립되지 않기때문에 그냥 넘어간다. 그리고 setTimeout이 timer로 들어가고 다시 input창에 작성하면 if문이 성립되어 그전에 setTimeout을 clearTimeout해버린다. 그렇게 반복되다가 타이핑을 멈추면 마지막 setTimeout이 적용되고 끝나는 것이다.
중요한것은 처음에 if문이 false이기 때문에 읽히지 않고, 마지막 함수는 if를 지나가지 않기때문에 호출된다는 것이다!!


연습2) 함수형 코드로 해보자

let timer = null;

const debounce = (func, time) => (...args) => {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    func(...args);
  }, time);
};

input.addEventListener("input",debounce((event) => {
    console.log(event.target.value);
  }, 400)
);

throttling과 같은 함수형이다.
debounce는 clearTimeout으로 계속 setTimeout을 없애고 마지막 함수만 출력된다는 것을 명심하자!!!

profile
내가 기억하기위한 블로그

0개의 댓글