jQuery 반응형 적용(새로고침)

/* 반응형 body width 변수값 bw */
        var bw = $("body").width();
        $(window).resize(function() {
            bw = $("body").width();
            console.log(bw);
        });
if(bw >= 801){
}else {

}

if문 반응형 스크립트 문제점

1. 바디의 너비 변수값은 리사이즈로 바로바로 적용이 된다.
2. 스크립트의 반응형인 if문은 처음 실행했을 때 한번만 적용이 된다.

해결 방법

1. resize 시 if문 적용

1. if문 전체를 함수(react() )로 묶는다.
2. if문 아래에 resize가 되었을 때 한번더 if문을 읽는다

fucntion react() {
if (bw >= 801) { /* PC 스크립트*/ }
else { /* mob 스크립트 */}
}
react();

$(window).resize(
	function(){
	  react();  
/* 사이즈조절시 스크립트가 여러번 다시 적용되다보니 렉이 걸리고 레이아웃도 꺠진다.*/
})

2. resize 후 일정 시간 후 새로고침

• 주요 메소드 setTimeout, document.location.reload()

resize시 if문을 다시 실행하면 여러번 실행되어 과부하 되기도 하고 보기에도 불편해진다.

리사이즈의 액션이 끝나고 일정시간이 지나면 적용될 수 있도록 코드 수정

사이즈 변경시 자동 새로고침

/* 사이즈 변경시 자동 새로고침*/
$(window).resize(function(){document.location.reload();})

새로고침 시간 설정

// 리사이즈 끝나고 0.3초마다 리셋
var delay = 300;
var timer = null; 
$(window).on('resize', function(){
	clearTimeout(timer);
	timer = setTimeout(function(){
	document.location.reload();
	}, delay);
});

참조
https://inpa.tistory.com/entry/jQuery-📚-브라우저-resize-이벤트-사용법-최적화 [👨‍💻 Dev Scroll:티스토리]