window resize event 텀을 두고 실행하기 (resize end event)

window resize event 텀을 두고 실행하기 (resize end event)

---

window resize 이벤트안에 어떠한 코드를 넣으면 매 resize시마다 이 코드가 실행된다. 의도적으로 매 resize마다 코드를 실행해야 하는 경우도 있지만, 그렇지 않은 경우라면 이는 매우 비효율적이고 때에 따라서는 브라우저에 과부하를 줄 수도 있다. 윈도우 리사이즈시 console.log을 찍어보자. 아래 코드를 보자.

//Javascript
window.addEventListener('resize', function(){
	console.log('resize event!');
});


//jQuery
$(window).on('resize', function(){
	console.log('resize event!');
});

매 resize시마다 이벤트가 실행된다.

그럼 위처럼 매번 코드를 실행하지 않고 리사이즈 이벤트가 끝난 뒤 코드를 실행하려면 어떻게 해야할까? 바로  setTimeout 메소드를 사용하면 된다. 아래 코드를 보자.

var delay = 300;
var timer = null;

//Javascript
window.addEventListener('resize', function(){
	clearTimeout(timer);
	timer = setTimeout(function(){
		console.log('resize event!');
	}, delay);
});

//jQuery
$(window).on('resize', function(){
	clearTimeout(timer);
	timer = setTimeout(function(){
		console.log('resize event!');
	}, delay);
});

resize마다 코드가 실행되지 않고 resize를 마치면 코드가 실행된다.

timer에 setTimeout 메소드로 0.5마다 콘솔을 찍게 해놨는데 0.5초가 지나기전 resize이벤트가 발생되면 계속 timer값이 계속 덮히는 것이다. 즉, 0.5초동안 resize를 하지 않으면 setTimeout안의 코드가 실행되는 것이다.

---

inputbox 포커스 효과 (유튜브 댓글 입력 폼) UI Clone

(IE 포함) 페이지 프린트(print)할때 background 안나오는 현상 해결

jQuery 사용, 이제는 정말 그만해야 하는걸까? (2020년 2월)