[함수형 코딩#17] 타임라인 조율하기

다이어그램을 그리기 위한 3단계

  1. 액션확인
  2. 각 액션을 그리고
  3. 단순화 하기 

ㄴ>자바스크립트에서 단순화 하기위한 단계 : 액션 통합하기 / 타임라인 통합하기 
ㄴ> 1장?에서 본 cuttingline역할해줄 cut()함수 구현하기 (=> 기다렸다가 동작하기)

const cut = (num, callback) => {
    let numFinished = 0; //카운터 초기화 
    return ()=>{
    	numFinished += 1;
        numFinished === num ? callback(): 0;
        }
    }

let done = cut(3, ()=>{	console.log("3개의 타임라인이 끝났습니다."); })

done(); //undefined
done(); //undefined
done(); //"3개의 타임라인이 끝났습니다."

//cut()함수 적용 예시

function calc_cart_total(cart, callback){
	let total = 0;
    let done = cut(2, ()=>{
    	callback(total);
        });
    cost_ajax(cart, (cost)=>{
    	total += cost;
        done();
        });
    shipping_ajax(cart, (shipping)=>{
        total += shipping;
        done();  //콜백실행됨
        });
 }

 

자바스크립트의 시간모델 

  1. 순차적 구문으로 순서대로 실행함
  2. 두타임라인이 있다면 둘중에 하나가 먼저 실행됨 
  3. 비동기 이벤트는 새로운 타임라인에서 실행됨
  4. 액션은 호출할 때마다 실행됨