21.04.30 비동기 처리 ,Callback 함수 쓰는법

1. 동기 / 비동기

동기

요청받은 순서대로 하나씩 처리함

 

 

비동기

요청을 여러개 받고 빨리 처리할 수 있는대로 처리해줌
-> 요청이 완료 됐을때 callback 함수가 실행이 되어서 요청을 처리하는 형식

 

예시)

console.log('start 1');
setTimeout(()=>{
    console.log('start 2');
},3000);
console.log('start 3');

결과 :

start 1

start 3

(3초후) start 2

 

 

---

 

2. 콜백함수

function go(){
    console.log('go go');
}


const 아반떼 = (callback) =>{
    setTimeout(()=>{
        console.log('아반떼 go');
        callback();
    },3000);
}

const 소나타 = (callback) =>{
    setTimeout(()=>{
        console.log('소나타 go');
        callback();
    },1000);
}

const 그랜저 = (callback) =>{
    setTimeout(()=>{
        console.log('그랜저 go');
        callback();
    },2000)
}

console.log('start');
아반떼(()=>{
    소나타(()=>{
        그랜저(()=>{
            console.log('자동차 경주 끝');
        });
    });
});

 

시간대가 달라서 소나타 - 그랜저 - 아반떼 순으로 나오던 것을

콜백함수를 이용해서

(3초후) 아반떼 - (1초후) 소나타 - (2초후) 그랜저 순으로 나오게 했다.