javascript(jquery) resize/scroll 이벤트 함수 한번만 실행하기

javascript(jquery)에서 resize/scroll 이벤트를 걸면 resize/scroll 되는 동안 이벤트가 반복적으로 계속 호출된다.
이벤트 내부의 내용이 복잡할 수록 브라우저에게 과부하를 주게 되므로 resize가 끝났을때 한번만 실행되도록 해줄 필요가 있다.

1. 먼저 아래와 같이 한번만 실행될 내용을 함수로 작성한다.

function resizeDone(){
  // 함수 내용 작성
}

2. resize/scroll 이벤트를 걸어준다.

$(window).on('resize', function(){  
   // resize 후 한번만 실행  
  clearTimeout( timer );  
  timer = setTimeout( resizeDone, delta );  
});

resize/scroll 이벤트가 호출될때 setTimeout을 계속 걸어줘서 resizeDone 함수를 즉시 실행하지 못하게 한다.

이벤트가 호출될 때마다 시간을 초기화하고 다시 등록하기 때문에 이벤트가 호출되는 동안은 resizeDone 함수가 실행되지 못한다.

마지막으로 이벤트가 호출되고, delta만큼의 시간동안 이벤트가 호출되지 않으면 resizeDone을 호출하는 원리이다.

여기서 delta는 150으로 잡았다. 환경에 따라 시간을 다르게 잡을 수 있지만, 150이 사용자가 답답함을 느끼지 않는 적당한 시간이라는 전문 퍼블리셔분의 의견에 따랐다.