[스프링] 자바스크립트 콜백(JS Callback)을 이용해서 비동기 순서 제어하는 방법

자바스크립트로 코딩을 하다보면 순서가 내가 원하는데로 되지 않는다.
구글링해서 동기 코드로 작성해도, 어떤 개발에서는 동기 순서도 정상적으로 되지 않는다.
즉, 코드에 따라서 동기식으로 작성하더라도 제어가 맘대로 안될 때가 생긴다.
자바 스크립트의 콜 스택(Call Stack), 테스트 큐(Task Queue), 이벤트 루프(Event Loop) 동작 순서 원리와 관련있는데...(Task Queue에 쌓인거는 어쨋든 Call Stack으로 옮겨져 나중에 실행됨)

보통 setTimeout과 같은 콜백함수를 쓸때 순서가 맘데로 제어가 안되는 일이 생긴다.

더군다나 Promise를 사용할 수 없는 구닥다리 시스템을 사용 중일때는 문제가 심각해진다.
여기서는 자세히 설명하지 않고 이런거 상관없이 제어하는 코드를 적어둔다.

콜백의 원리를 이용한 것인데, 어디서나 콜백을 쓰면 컨트롤이 자유롭다.
요즘 뷰(VUE)니 리액트(REACT)니... 코드가 중구난방인 프론트 세상에서 이게 제일 간단한것 같다..

 

1. 콜백 함수

var timer = 1000;

function fn_main(callback){
	// 타이머와 상관없는 코드 실행
    setTimeout(function(){
		// 콜백 첫번째 실행
        callback();
    }, timer);
}

function fn_sub(){
	// 콜백 두번째 실행
}

 

2. 콜백 함수 실행

fn_main(function(){
    fn_sub();
});

이렇게 코드를 작성하면 동기식과 같은 방향으로 코드가 실행될 것이다.

ajax나 submit 할때도 이런 방식으로 작성하면 원하는 동기식으로도 작성할 수 있겠다..