자바스크립트 비동기 처리 Callback

어떠한 함수들이 시간이 걸리는 연산(또는 작업)일 때 그냥 순서대로 호출하는 식의 코드를 작성하게 되면, 원하는 순서대로 처리가 되지 않는것을 경험할 수 있다.

😅 실행할 때마다 실행 순서가 달라요!

아래 코드는 각 함수들의 실행 시간을 Math.random() 함수를 이용하여 랜덤하게 실행되도록 했다. func1(), func2(), func3() 순서대로 호출했지만 실행할 때마다 호출되는 순서가 다른것을 볼 수 있다.

* Math.random() : 0~1 사이의 소수 값을 반환해주는 함수

function func1() {
	setTimeout(()=>{
		console.log('1');
	}, Math.random()*100);
}

function func2() {
	setTimeout(()=>{
		console.log('2');
	}, Math.random()*100);
}

function func3() {
	setTimeout(()=>{
		console.log('3');
	}, Math.random()*100);
}

func1();
func2();
func3();

실행할 때 마다 다른 순서

 

😊 실행 순서가 항상 같아야 할 경우 - Callback을 사용하자

각 함수마다 next라는 Callback 함수 인자를 받을 수 있게 하였고, 각 함수가 그다음 함수를 호출하게 하였다.

아무리 시간이 걸린다고 해도, 앞의 함수가 다음(next) 함수를 불러주기 때문에 실행 순서가 원하는 대로 호출되는 것을 볼 수 있다.

* Callback 함수: 함수의 매개변수 인자 값을 함수로 줬을 때의 함수

function func1(next) {
	setTimeout(()=>{
		console.log('1');
		if(next) {
			next();
		}
	}, Math.random()*100);
}

function func2(next) {
	setTimeout(()=>{
		console.log('2');
		if(next) {
			next();
		}
	}, Math.random()*100);
}

function func3(next) {
	setTimeout(()=>{
		console.log('3');
		if(next) {
			next();
		}
	}, Math.random()*100);
}

func1(()=>{
	func2(()=>{
		func3();
	});
});

 

😱 콜백 지옥

실행 순서에 맞게 호출해야 하는 함수가 많이 지게 되면 아래와 같이 콜백 지옥을 경험할 수 있다.

다음 포스팅에서는 콜백 지옥을 막기 위한 다른 비동기 처리 방법 Promise와 aync/await에 대해 알아보자.

func(()=>{
	funcNext(()=>{
		funcNext(()=>{
			funcNext(()=>{
				funcNext(()=>{
					funcNext(()=>{
						funcNext(()=>{
							funcNext(()=>{
							});
						});
					});
				});
			});
		});
	});
});

 

[Javascript] 비동기 처리 3 - async/await

[Javascript] 비동기 처리 2 - Promise

[Javascript] 배열 연산 동기화(Promise All)