resize 질문

이 강의를 듣는 시점이 많아 달라서, 현재 질문자님에게 도움이 될지는 모르겠으나

제가 알기로는 resize 같은 이벤트발생시마다 작동하는 것을 최소화 하기위해서 debounce 나 throttle 기법을 사용하는 것으로 알고 있습니다.

두 가지모두 선생님이 언급하신 setTimeout 같은 timing 을 제어해서 callback 함수를 제어하는 방식이긴 하지만요 :)

말씀대로 리사이즈가 빈번하게 일어나는 것은 아니라서 따로 신경쓰지 않아도 되는 경우도 많기는 한데요,
스크롤이나 리사이즈처럼 많은 횟수가 실행될 가능성이 있는 경우 아래처럼 setTimeout과 상태변수를 이용해서 실행횟수를 제한하기도 합니다. (예제에서는 333밀리초에 1번씩, 즉 1초에 3회 실행되게 했습니다)

let state = true;
  let n = 0;

  window.addEventListener('resize', () => {
    if (!state) return;

    state = false;

    setTimeout(() => {
      console.log(n++);
      state = true;
    }, 333);
  });

가끔 사용되는 패턴이니, 환경에 맞추어 변형해서 사용하시면 됩니다^^