Element Resize 시 window resize 이벤트 발생 속도

회사 업무를 진행하다가 Element를 리사이징 했을 때 window resize 이벤트가 비정상적인 속도로 실행되어

Canvas의 annotation이 오류를 일으키는 것을 확인하였다.

 

최초 canvas annotation 부분의 코드를 수정하려고 했는데 해당 부분에는 문제가 없는 것 같아

리사이징 이벤트 자체를 수정하기로 하였다.

 

브라우저를 리사이징 할 때는 이상이 없지만 Element를 리사이징 했을 때 오류가 발생하는 경우

window resize 이벤트를 약간 수정할 필요가 있다.

// 기존 코드
$(window).resize(function() {
	initializePerfectScroll();

	if(false == checkCanvasImageLoaded()) {
		return;
	}
	
	selectThumbnail(currentSelectedId);
})

기존 코드는 코드 자체의 문제는 없지만 Element 리사이징 시 비정상적인 속도로 실행되기 때문에 timeout을 설정하였다.

 

// 수정 코드
function winResize() {
	initializePerfectScroll();

	if(false == checkCanvasImageLoaded()) {
		return;
	}
	
	selectThumbnail(currentSelectedId);
}

let timeSet;

window.onresize = function() {
	clearTimeout(timeSet);
	timeSet = setTimeout(winResize, 50);
}

해당 코드로 수정하니 Canvas의 렌더링이 훨씬 매끄러워진 것을 확인하였다.