16장. 타임라인 사이에 자원 공유하기

클릭한 순서대로 DOM이 업데이트되도록 하는 방법 → 큐(queue) 활용하기

큐(queue)

넣은 순서대로 항목을 꺼낼 수 있는 데이터 구조
사용자 클릭을 큐에 넣으면 넣은 순서대로 꺼낼 수 있음
어떤 함수를 새로운 타임라인에서 실행하고 한 번에 한 타임라인만 실행할 수 있도록 만들어주는 고차함수
여러 타임라인에 있는 액션 순서를 조율하기 위해 많이 사용함 ⇒ 동시성 기본형 : 자원을 안전하게 공유할 수 있는 재사용가능한 코드 ⇒ 액션에 순서 보장 슈퍼 파워를 줌

function Queue(worker) {
  var queue_items = [];
  var working = false;
 
  function runNext() {
    if (working) return;
    if (queue_items.length === 0) return;
    working = true;
    var item = queue_items.shift();
    worker(item.data, function (val) {
      working = false;
      setTimeout(item.callback, 0, val);
      runNext();
    });
  }
 
  return function (data, callback) {
    queue_items.push({
      data: data,
      callback: callback || function () {},
    });
    setTimeout(runNext, 0);
  };
}
 
function calc_cart_worker(cart, done) {
  calc_cart_total(cart, function (total) {
    update_total_dom(total);
    done(total);
  });
}
 
var update_total_queue = Queue(calc_cart_worker);

Ch15 Ch17