[JavaScript] resize 한 번만 실행

다음 코드를 살펴보자.

이전 시간에 다룬 코드를 그대로 가져온 것이다.

[JavaScript/jQuery] 요소 추가, 삭제, 이동

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script>
  resonsiveWidth();

  function resonsiveWidth() {
    let ww = $(window).width();
    $(window).on('resize', function () {
      ww = $(window).width();

      if (ww < 600) {
        mobileBox();
      } else {
        pcBox();
      }
    });
  }

  function mobileBox() {
    let $box3 = $('.box3');
    $('.box1').before($box3);
  }

  function pcBox() {
    let $box3 = $('.box3');
    $('.box2').after($box3);
  }
</script>

 

브라우저의 크기를 조절할 때 pcBox() 혹은 mobileBox() 함수가 실행되는 responsiveWidth() 함수이다.

그 결과 아래와 같은 기능을 수행한다.

 

 

 

하지만 브라우저의 크기가 1px이라도 변화가 있다면 즉시 resize 이벤트를 호출하게 되어 브라우저에 과부화를 일으킬 소지가 있다.

이는 콘솔로그를 찍어보면 더 극명하게 드러난다.

 

이렇게까지 resize 메서드를 실행할 필요가 없기 때문에 브라우저 크기를 조절할 때 한 번만 실행되도록 코드를 수정하겠다.

 

수정 전

  function resonsiveWidth() {
    let ww = $(window).width();
    $(window).on('resize', function () {
      ww = $(window).width();
      if (ww < 600) {
        mobileBox();
      } else {
        pcBox();
      }
    });
  }

 

수정 후

function resonsiveWidth() {
  let ww = $(window).width();
  let timer = null;
  let sec = 300;
  $(window).on('resize', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
      ww = $(window).width();
      if (ww < 600) {
        mobileBox();
      } else {
        pcBox();
      }
    }, sec);
  });
}

수정한 코드는 0.3초마다 이벤트가 실행 중인지 확인하고 실행 중이라면 시간을 다시 타이머한다.

즉 0.3초 동안 아무런 이벤트가 없다면 setTimeout() 메서드가 실행된다.