반응형
어떠한 함수들이 시간이 걸리는 연산(또는 작업)일 때 그냥 순서대로 호출하는 식의 코드를 작성하게 되면, 원하는 순서대로 처리가 되지 않는것을 경험할 수 있다.
😅 실행할 때마다 실행 순서가 달라요!
아래 코드는 각 함수들의 실행 시간을 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' 카테고리의 다른 글
[JS/크롬]자바스크립트로 유튜브 광고 제거-Javascript (1) | 2021.10.05 |
---|---|
[JS/HTML/DOM]Element태그 요소 포함 단어 검색(querySelector, class, name, id, DOM 파싱, 와일드 카드, * 별표, */$/^, 자바스크립트) (0) | 2021.10.05 |
자바스크립트 비동기 처리 async/await (0) | 2021.10.04 |
자바스크립트 비동기 처리 Promise (0) | 2021.10.04 |
자바스크립트 배열 연산 동기화 Promise All (0) | 2021.10.03 |