[Javascript] 비동기처리 콜백함수 간단한 예시

예시 1

 

 

 

function hi() {
  setTimeout(() => {
    console.log("안녕하세요 반가워요");
  }, 3000);
}
hi();

 

→결괏값:  3초 후에  안녕하세요 반가워요

 

 

 

예시 2

 

비동기 처리의 결괏값을 함수 밖에서도 사용하고 싶다면

 

function 함수명(매개변수 1, 매개변수 2, callback){

비동기처리 해주는 함수(()=>{

callback();

}

)

함수명(인수 1, 인수 2, 비동기처리의 결괏값을 사용하고자 하는 콜백함수 추가 )

}

function add(a, b, callback) {
  setTimeout(() => {
    const sum = a + b;
    callback(sum);
  }, 3000);
}
add(1, 2, (value) => {
  console.log(value);
});

→결괏값:3초 후 3

 

 

 

 

예시 3

 

배달 앱 피자를  주문한 상황

 

 

function orderFood(callback) {
  setTimeout(() => {
    const food = "피자";   
    callback(food)
  }, 1000);
}

function readyFood(food, callback) {
  setTimeout(() => {
    const readyFood = ` ${food}가 식당에서 준비 중 입니다!`;
    callback(readyFood);
  },2000);
}

function deliveryFood(food, callback) {
  setTimeout(() => {
    const deliveryFood = `기사님께서 ${food}를 배달하고 계십니다!`;
    callback(deliveryFood);
  }, 2000);
} 

function deliveryed(food,callback) {
  setTimeout(()=> {
    const deliveryed =`${food}배달 완료`;
    callback(deliveryed)
  },2000)
}

orderFood((food) => {
  console.log(`${food}주문 완료!`);
  readyFood(food, (readyFood) => {
    console.log(readyFood);
    deliveryFood(food, (deliveryFood) => {
      console.log(deliveryFood); 
      deliveryed(food, (deliveryed) => {
        console.log(deliveryed)
      })
    });
  });
});

 

→ 결괏값:

피자주문 완료!
피자가 식당에서 준비 중입니다!
기사님께서 피자를 배달하고 계십니다!

피자배달 완료

 

 

그렇지만 비동기  처리가 계속 반복될 때는 callback 함수는 피하자

→콜백 지옥이라서 수정이나 오류 찾기 힘들다,,