done()함수 빼내기
큐를 반복해서 처리하는 코드 (runNext)와 큐에서 하는일 (calc_cart_total())를 분리할 수 있다.
-> done은 콜백함수
-> 큐를 반복해서 처리하는 코드를 콜백으로 뺀다
-> worker함수는 의존하고 있는것이 없어 Queue()밖으로 빼고 인자로 전달할 수 있다!
워커 행동을 밖으로 빼기
일반적인 큐를 만들면 많은 동작에 재사용할 수 있다.
함수를 인자로 빼어 특정한 행동을 하는 코드를 없애고, '큐가 생성될 때 원하는 행동을 전달'할수있다!
작업이 끝났을때 실행하는 콜백 받기
콜백도 작은 객체로 만들어 큐에 넣는다!
큐를 반복해서 처리하는 worker에는 data만 전달한다.
큐 배열에 데이터와 콜백을 모두 넣는다.
callback || function(){}으로 콜백이 없는 경우는 실행하지 않도록 한다.
작업이 끝났을때 콜백 실행하기
worker를 실행할때 콜백도 함께 인자로 전달한다.
setTimeout -> 비동기로 호출하기 위한 용도
만든 큐 함수 정리
Queue()는 함수를 인자로 받아 또 다른 함수를 리턴하는 함수이다.
Queue()는 어떤 함수를 새로운 타임라인에서 실행하고, 한 번에 한 타임라인만 실행할 수 있도록 만들어주는 고차함수이다.
= 순서 보장을 해준다.
-> 여러 타임라인을 올바르게 동작하도록 만드는 재사용가능한 코드이다.
지금까지 만든 타임라인 분석하기
공유자원 장바구니, 큐, DOM을 차례로 살펴보자.
장바구니 -> 큐가 있어서 순서가 보장됨
DOM -> 큐가 있어서 순서가 보장됨
큐를 사용해 DOM업데이트를 같은 타임라인에서 하도록 함.
제품 추가 버튼을 누르는 순서대로 DOM 업데이트가 실행된다.
큐
모든 타임라인의 서로 다른 단계에서 큐를 공유하고 있다!
큐에 추가하는 두 단계 중 하나는 항상 먼저 실행된다.
큐에서 꺼는 두 단계 중 하나는 항상 마지막에 실행된다.
-> 가운데 같은 시점?에 있는 "큐에 추가", "큐에서 꺼냄" 부분이 문제가 되지않을지 확인필요
가능한 타임라인을 그려보자..
큐를 건너뛰도록 만들기
순서대로 실행하는것은 매우 느림.
ex) 누군가 장바구니 제품을 빠르게 4번 클릭한다 -> 마지막 합계만 dom에 표시되면 된다.
하지만 큐에 있는 4개의 작업이 한번에 하나씩 처리될 것.
ajax 응답까지 기다리면 최종 결과 업데이트에 몇 초가 소요될 수 있다.
-> 덮어쓸 항목을 큐에서 빼자
새로운 작업이 들어오면 건너띄는 dropping Queue
드로핑 큐에서는 아무리 빨리 항목을 추가해도 큐 항목이 한 개 이상 늘어나지 않는다.
사용자는 계속 기다릴 필요없이 서버에 응답을 최대 두 번만 기다린다.
큐를 재사용할 수 있도록 만들기
워커 행동을 밖으로 빼기
작업이 끝났을때 실행하는 콜백 받기
작업이 끝났을때 콜백 실행하기
만든 큐 함수 정리
Queue()는 함수를 인자로 받아 또 다른 함수를 리턴하는 함수이다.
Queue()는 어떤 함수를 새로운 타임라인에서 실행하고, 한 번에 한 타임라인만 실행할 수 있도록 만들어주는 고차함수이다. = 순서 보장을 해준다.
-> 여러 타임라인을 올바르게 동작하도록 만드는 재사용가능한 코드이다.
지금까지 만든 타임라인 분석하기
공유자원 장바구니, 큐, DOM을 차례로 살펴보자.
장바구니 -> 큐가 있어서 순서가 보장됨
DOM -> 큐가 있어서 순서가 보장됨
큐
모든 타임라인의 서로 다른 단계에서 큐를 공유하고 있다!
-> 가운데 같은 시점?에 있는 "큐에 추가", "큐에서 꺼냄" 부분이 문제가 되지않을지 확인필요
가능한 타임라인을 그려보자..
큐를 건너뛰도록 만들기
-> 덮어쓸 항목을 큐에서 빼자
새로운 작업이 들어오면 건너띄는 dropping Queue
드로핑 큐에서는 아무리 빨리 항목을 추가해도 큐 항목이 한 개 이상 늘어나지 않는다. 사용자는 계속 기다릴 필요없이 서버에 응답을 최대 두 번만 기다린다.