카테고리 없음

ajax 함수 return

reallifeliver 2018. 6. 12. 21:38
반응형

비동기처리를 통해 가져온 Json객체를 Return받아 다른 Script함수에 활용하려 하였는데, 비동기처리 함수에서 undefined가 return되는 현상을 겪었다. 코드를 보면 다음과 같다.



1. 데이터를 불러오는 비동기 함수 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getGanttItems(sid) {
    var tasks;
    $.ajax({
        url : "step/getTimelineTasks.htm",
        data : {
            sid : sid
        },
        async:false,
        dataType : "json",
        success : function(data) {
            console.log(data);
            tasks = data;
            console.log(tasks);
        },
        
    })
    return tasks;
};
 
cs




2. 리턴받은 데이터를 활용하는 함수 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    // 스텝 timeline 페이지
    $("#timeline-page").click(function(evt){
        $.ajax({
            url:"step/timeline.htm",
            dataType:"html",
            success:function(data){
                
                $("#main-box").empty();
                $("#main-box").append(data);
                
                var tasks = getGanttItems(3); // 1
                makeTimeline(tasks); // 2
                console.log(tasks); // 3
            }
        })
    })
    
cs




위의 2번 함수에서 실행되는 순서는 2, 3, 1순 이었다. 


이는 ajax의 return과 success가 따로 동작하기 때문이었다. 이를 해결하기 위해 ajax에  async:false,

라는 옵션을 추가함으로써 해결할 수 있었다.



사실 이 방법은 절대 추천될 수 없는 방법이다. 이유는  async:false, 라는 옵션의 본질은 자바스크립트가 실행되는 싱글 스레드의 동작을 비동기처리가 끝날때 까지 멈추어 버리는 것이기 때문이다.  즉, 비동기를 동기처럼 실행하도록 하는 옵션이라고 할 수 있다.

이를 보안하는 내용은 Promise의 개념을 이해해야 한다. 아래의 링크를 참고하자

참고 






반응형