setTimeout

안녕하세요

반말과 존댓말을 섞어서 글을 작성하려고 하니 굉장히 이상하네요 하핫

존댓말을 쓰도록 노력하겠습니다.

제가 1.5개월간 개인프로젝트를 진행하면서 느꼈던 점은 setTimeout를 잘 이용해야 한다 입니다.

setTimeout란?

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. 

이라고 잘 설명 되어 있네요 (참고 : http://www.w3schools.com/jsref/met_win_settimeout.asp)

프로젝트에서 외부 api를 사용하는 경우가 많았는데, 이때 html, jqm의 화면이 다 구성되기 전에 외부 api의 호출이 완료되는 경우가 많았습니다. 따라서 이때 setTimeout 메소드를 활용해서 dom객체가 생성되고 난 후에 호출을 해야 원하는 화면을 출력할 수 있습니다.

특히 jQuery Mobile에서 이게 중요한데요, 제가했던 코드를 보시면

	render:function () { $(this.el).html(this.template());
	setTimeout(this.mapRender, 220);
	/*
	var publicData = pData.toJSON();
	console.log(publicData.openTime);
	*/
	},
	mapRender: function(){
	var publicData = pData.toJSON();
	var location = new daum.maps.LatLng(publicData.lat, publicData.lng);
	var mapContainer = document.getElementById("map");
	var mapOption = {
	center : location,
	level : 3
	};
	var map = new daum.maps.Map(mapContainer, mapOption);
	var control = new daum.maps.ZoomControl();
	map.addControl(control, daum.maps.ControlPosition.TOPRIGHT);
	var marker = new daum.maps.Marker({
	map: map,
	position: location
	});
	$(".title").append(publicData.dataTitle);
	$("#toiletArea").append(publicData.toiletArea);
	$("#openTime").append(publicData.openTime);
	console.log("map");
	}

mapRender함수를 setTimeout 메소드를 거치지 않고 실행했을 때 일부만 렌더링 되어 화면에 지도가 반절만 보여집니다.

jqm의 setTimeout 자체 렌더링 시간은 150입니다. 

따라서 저는 그보다 조금 뒤인 220( 200이나 180으로 설정했더니 불안정하게 지도가 뿌려지네요 잘 되는 경우와 안되는경우 모두 발생)으로 설정해서 제가 원하는 뷰를 볼 수 있게 구현했습니다.