[220129] promise를 활용한 자동차 레이싱 게임

[ 목표 ]

1. 세 대의 차를 아반떼>소나타>제네시스 순서대로 출발시킨다.
2. 출발할때 GO!라는 텍스트를 표시한다.
3. 도착할때 END!라는 텍스트를 표시한다.
4. 한대의 차가 출발하고 도착하고나서 다음 차가 출발하게 한다.
5. 3대의 차가 도착하고나면 경기끝!이란 텍스트를 표시한다.

 

---

 

Promise와 콜백함수

const 아반떼 = new Promise((resolve,reject)=>{
    setTimeout(()=>{ resolve('아반떼 GO!'), 1000})
})

아반떼.then( data => {
    console.log(data)
    console.log('아반떼 END')
})
---------------------------------------------------------------
//출력
아반떼 GO!
아반떼 END

 

---

 

개별적으로 호출해서 출력하기

const 아반떼 = new Promise((resolve,reject)=>{
    setTimeout(()=>{ resolve('아반떼 GO!'), 1000})
})
const 소나타 = new Promise((resolve,reject)=>{
    setTimeout(()=>{ resolve('소나타 GO!'), 1000})
})
const 제네시스 = new Promise((resolve,reject)=>{
    setTimeout(()=>{ resolve('제네시스 GO!'), 1000})
})

아반떼.then( data => {
    console.log(data)
    console.log('아반떼 END')
})
소나타.then( data => {
    console.log(data)
    console.log('소나타 END')
})
제네시스.then( data => {
    console.log(data)
    console.log('제네시스 END')
    console.log('경기끝')
})
---------------------------------------------------------------
//출력
아반떼 GO!
아반떼 END
소나타 GO!
소나타 END
제네시스 GO!
제네시스 END
경기끝

 

---

 

 

순서대로 진행되는 .then의 특성을 이용해서 출력하기

const 아반떼 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('아반떼 GO!')
        },1000)
    })
}
const 소나타 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('소나타 GO!')
        },1000)
    })
}
const 제네시스 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('제네시스 GO!')
        },1000)
    })
}

아반떼()
.then( data => {
    console.log(data)
    console.log('아반떼 END')
    return 소나타()
})
.then( data=>{
    console.log(data)
    console.log('소나타 END')
    return 제네시스()
})
.then( data=>{
    console.log(data)
    console.log('제네시스 END')
    console.log('경기끝')
})
---------------------------------------------------------------
//출력
아반떼 GO!
아반떼 END
소나타 GO!
소나타 END
제네시스 GO!
제네시스 END
경기끝