비동기처리와 순차적으로 실행해주는 콜백함수

자바스크립트는 동기적처리가 베이스다
그런데, 상황에 따라서는 비동기적처리를 한다
순차적으로 가다가 오래걸리는 코드는 일단 치워두고, 쉬운 코드 먼저 실행한다음, 그제서야 실행한다
 

<script>
    console.log(1);
    setTimeout(function(){console.log(2)},1000);
    console.log (3);
</script>

// 1
// 3
//(1초뒤) 2

 

함수를 순차적으로 실행하고 싶다면?

콜백함수를 사용한다 즉, 함수 안에 함수를 넣는다

<콜백함수 디자인 하는법>
<script>

 function 첫째함수(구멍){
 console.log(1);
 구멍();
 }
 function 둘째함수(){
 console.log(2);
 }

//첫째함수();
//둘째함수(); 이런식으로 실행한다면 순차적으로 실행이 안될수도 있음. 
//예를 들어 첫째함수 안에 setTimeout이 있다던가... 

 첫째함수(둘째함수); //=> 차례로 출력, 좀더안전
 
</script>

→ 참고로, 콜백함수는 비동기,동기라고 나누지 말자. 그냥 순차적으로 출력하는, 함수디자인 패턴일뿐...
 
 
 
 
 
 

콜백함수의 문제점

첫째함수(function(){
    둘째함수(function(){
        셋째함수(function(){
            넷째함수(function(){
  
            });
        });
    });
});
겹겹이 쌓여서 보기싫음

 

해결방법은 프로미스!

첫째함수().then(function(){

}).then(function(){

}).then(function(){

}).then(function(){...