자바스크립트 Resize Event

Resize Event는 "웹 브라우저" 화면 크기가 변경될 때 실행되는 이벤트이며, 주로 반응형 웹을 제작할 때 사용 됩니다.

let resizeEvent= null;
window.addEventListener("resize", function(){
    clearTimeout(resizeEvent);
    resizeEvent = setTimeout(resizeEnd, 300);   // 0.3초 뒤에 실행
});
function resizeEnd(){
    //실행 코드 작성
    let width = document.body.clientWidth;
    console.log(width);
}

 

[jQuery 코드]

$(window).resize(function(){
	if(this.resizeTO){ clearTimeout(this.resizeTO); }
	this.resizeTO = setTimeout(function(){ $(this).trigger('resizeEnd'); }, 300);
}).on('resizeEnd', function(){
    //실행 코드 작성
    let width = $('body').width();
    console.log(width);
});