JQuery 특정메소드 비동기적 실행방식으로 인한 문제발생 및 해결과정

JQuery $.getJSON() 메소드의 비동기적 실행방식으로 인한 문제발생

처음에 의도했던바

makeAreas() 메소드에서 JSON 파일의 내용을 읽어와 전역변수인 areas 를 채워넣은 다음에

loadMap() 메소드에서 areas 변수에 저장된 좌표정보들을 이용해 폴리곤을 지도위에 그려내려 하였다.

 

예상치 못한 결과

JQuery 메소드 중에서도 $.getJSON(), $.ajax() 메소드는 비동기 방식으로 동작하여

그 메소드를 호출한 직후(메소드의 실행이 끝나지 않았더라도) 바로 다음 구문을 실행하고 있었다.

이 때문에 loadMap() 메소드에서 비어있는 areas를 이용하여 동작하였고 원하는 결과대로 실행되지 않았다.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API키를 입력하세요"></script>
<script>
	// 지도에 폴리곤으로 표시할 영역데이터 배열(전역변수)
 	var areas = [];
	
 	$(function(){
 		makeAreas();
 		loadMap();
 	});
 	
 	function makeAreas(){
 		alert("makeAreas() 호출됨");
 		$.getJSON("resources/only_seoul.json", function(geojson){	// json 파일관련 객체를 얻음
 		 	var units = geojson.features;				// 파일에서 key값이 "features"인 것의 value를 통으로 가져옴(이것은 여러지역에 대한 정보를 모두 담고있음)
 		 					
 		 	$.each(units, function(index, unit){			// 1개 지역씩 꺼내서 사용함. val은 그 1개 지역에 대한 정보를 담음
 		 		var coordinates = []; 	//좌표 저장할 배열
 		 		var name = ''; 			// 지역 이름
 		 				
 		 		coordinates = unit.geometry.coordinates; 	// 1개 지역의 영역을 구성하는 도형의 모든 좌표 배열을 가져옴 
 		 		name = unit.properties.SIG_KOR_NM;			// 1개 지역의 이름을 가져옴
 		 					
 				var ob = new Object();
 				ob.name = name;
 				ob.path = [];
 					
 				$.each(coordinates[0], function(index, coordinate){ // []로 한번 더 감싸져 있어서 index 0번의 것을 꺼내야 배열을 접근가능.
 					ob.path.push(new kakao.maps.LatLng(coordinate[1], coordinate[0]));
 				});
 					
 				areas[index]=ob; 
 		 	});//each
 		 });//getJSON
 	}
	
	function loadMap(){
		alert("loadMap() 호출됨");
		alert(areas.length);
		
		//지도를 로드하고, areas 정보 이용해서 폴리곤을 지도위에 그려냄
	}
</script>

해결방법

$.getJSON() 메소드를 호출하기 전에 $.ajaxSetup({ async: false }); 을 호출해주면

해당 메소드가 비동기가 아닌 동기화 방식으로 동작하게 되어 위에서 구현하고자 했던 바가 해결된다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API키를 입력하세요"></script>
<script>
	// 지도에 폴리곤으로 표시할 영역데이터 배열(전역변수)
 	var areas = [];
	
 	$(function(){
 		makeAreas();
 		loadMap();
 	});
 	
 	function makeAreas(){
 		alert("makeAreas() 호출됨");
		$.ajaxSetup({ async: false }); // $.getJSON() 메소드의 동기화 처리
 		$.getJSON("resources/only_seoul.json", function(geojson){	// json 파일관련 객체를 얻음
 		 	...
 		 });
 	}
	
	function loadMap(){
		alert("loadMap() 호출됨");
		alert(areas.length);
		
		//지도를 로드하고, areas 정보 이용해서 폴리곤을 지도위에 그려냄
	}
</script>