[ajax]_함수 실행 순서 (실행 순서 배정하기)

문제 요인

실전에서 여러개의 함수를 선언, 사용 하고 전역변수처럼 사용하는 지역변수에 값을 수정할 때 원하는 순서대로 진행이 되지 않아 debug를 하는 경우가 많습니다.

 

대부분 값을 가져오는 동안 해당 값을 가져가거나, 통신속도가 느려, 환경마다 값이 달라지는 문제가 발생하기도 합니다.

 

이럴때는 데이터를 받아올 때 까지 기다렸다가 진행해야합니다. 보통은 await 라는 기능을 사용합니다.

 

여기서는

 

ajax 통신 등 데이터를 받아와 저장하는 경우 await 를 사용하지 못하거나, 사용하지 않고 흉내내는 방법을 설명합니다.

---

여러개의 함수를 선언하고

$(document).ready(function() {

})

내부에 함수를 정렬하게 되어도, 내부 실행 속도에 따라서 순서가 천차 만별입니다.

 

예시를 보겠습니다.

 

---

<script>

$(document).ready(function() {

	service.setBoardCode();
	service.pringBoardCode();

})

평범하게 service에 있는 데이터를 가져오는 set 함수와 이를 출력하는 함수가 있다고 가정합니다.

 

서비스는 다음과 같이 구성되어 있습니다.

let service = {
	setBoardCode: function(){
        
    	$.ajax({
        url: test/test.do,
        data:{},
        success: function(data){
        	define.setcode(data);
        }
        });
        
    },
    printBoardCode: function(){
    	console.log(define.getCode());
    }

set은 어디선가 비동기통신을 하여서 저장소에 값을 저장하는 함수를 호출하고,

print는 저장소에서 값을 가져오는 함수를 호출합니다.

 

저장소함수는 다음과 같습니다.

let define = function(){
	let code = '00';
    
	return{
    	getCode: function(){
        	return code;
        },
        setCode: function(item){
        	code = item;
        }
    }
}.call();

내부의 code 라는 지역변수를 다루게 되는것입니다.

 

코드전문

$(document).ready(function() {

	service.setBoardCode();
	service.pringBoardCode();

})

let define = function(){
	let code = '00';
    
	return{
    	getCode: function(){
        	return code;
        },
        setCode: function(item){
        	code = item;
        }
    }
}.call();
	



let service = {
	setBoardCode: function(){
        
    	$.ajax({
        url: test/test.do,
        data:{},
        success: function(data){
        	define.setcode(data);
        }
        });
        
    },
    printBoardCode: function(){
    	console.log(define.getCode());
    }
}

일반적으로는 값을 저장하고 값을 가져오게 될 거 같지만,

통신속도가 느릴수록 값을 먼저 가져오는 경우가 생기게 됩니다.

 

이를 해결하는 방법은 await 같은 처리를 해줘도 되지만,

함수가 만약 비동기,동기가 섞여 있을 수 있기 때문에 다른 방법을 설명하겠습니다.

 

처리방법

$(document).ready(function() {

	service.setBoardCode(event, function(){
    
	service.pringBoardCode();
    
    });
	

})

 

함수 를 호출할 때 파라미터로 콜백함수를 줍니다.

그리고 그 안에 뒤이어 실행될 함수(들) 을 작성합니다.

 

함수는 다음과 같이 수정합니다.

let service = {
	setBoardCode: function(event, handler){
        
    	$.ajax({
        url: test/test.do,
        data:{},
        success: function(data){
        	define.setcode(data);
            
            if(handler) handler()
        }
        });
        
    },
    printBoardCode: function(){
    	console.log(define.getCode());
    }

handler 라는 파라미터 함수(들) 이 있다면, ajax 가 성공한 뒤 값을 세팅하고 해당 함수를 실행하라는 의미입니다.

 

이처럼 await 를 흉내 낼 수 있습니다.

 

감사합니다.