throttling이란..?

throttling관련 글을 여러번 반복해서 읽어보았지만, 매번 연습때마다 개념이 헷갈려서 다시 한번 적어본다.
스크롤을 내릴때마다 숫자가 올라가도록 설정할 것인데 0.4초마다 한번씩 올라가게 할 것이다.

연습1) 스크롤시 0.4초 후에 주어진 숫자를 증가시켜라

let num = 100;

window.addEventListener("scroll", function () {
  setTimeout(function () {
    console.log((num += 100));
  }, 400);
});

위와같이 작성하면 0.4초 후 발생한 스크롤 이벤트 만큼 모아져 있던 숫자가 한번에 증가할 것이다.그리고 순식간에 num이 5000이 되어버린다. 이렇게 숫자가 한번에 많이 증가하는 것을 원치 않기에 throttling을 적용해 보겠다.

let num = 100;
let timer = null;

window.addEventListener("scroll", function () {
  if (!timer) {
    timer = setTimeout(function () {
      timer = null;
      console.log((num += 100));
    }, 400);
  }
});

if문의 조건의 Boolean개념이 확실하지 않아서 이해하는데 굉장히 오래 걸렸다.
일단 코드를 보면 timer는 false이다. 그리고 scroll시 만약에 !timer 가 true라면 (여기서 if(!timer)는 만약에 timer가 true라면이 아니다!! 여기서 이해하는데 굉장히 오래걸렸다...)
0.4초 후 timer를 다시 null로 만들고 숫자를 더하는 함수이다.
중요한것은 timer에 setTimeout이 들어가는 순간 if문의 조건이 성립되지 않기 때문에 숫자는 올라가지 않을 것이고 0.4초 후에 timer를 null로 만들고 다시 숫자가 올라가는 개념이다.
즉!! 일정시간동안은 함수가 호출되지 않다가 시간이 끝나면 호출되는 방식!!

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

let timer = null;
let num = 0;

const throttle = (func, time) => (...args) => {
  if (!timer) {
    timer = setTimeout(() => {
      timer = null;
      func(...args);
    }, time);
  }
};

window.addEventListener("scroll",throttle((event) => {
    console.log((num += 100));
  }, 1000)
);

함수안에 함수를 쓰고 parameter들이 곂칠때 가장 헷갈려서 이 코드도 이해하는데 굉장히 오래 걸렸다.
일단 throttle함수의 func는 scroll이벤트안에 () => {} 와 같다.
...args는 event이므로 숫자를 출력해주는 console.log((num += 100))이다.
결국 쓰로틀링을 시간과 나타날 이벤트만 지정해주면 계속 쓸수 있는 함수를 만든 셈이다.