Deferred object
Upcoming SlideShare
Loading in...5
×
 

Deferred object

on

  • 740 views

Event Loop and Deverred Object

Event Loop and Deverred Object

Statistics

Views

Total Views
740
Views on SlideShare
622
Embed Views
118

Actions

Likes
4
Downloads
8
Comments
0

7 Embeds 118

http://blog.javarouka.me 99
http://feedly.com 7
https://www.blogger.com 6
https://twitter.com 2
http://www.slideee.com 2
https://8302931623881480400_8039af6ed46c07d2f00248749fdfffead5df7eca.blogspot.com 1
http://feeds.feedburner.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Deferred object Deferred object Presentation Transcript

  • Deferred Object 이항희 ## javarouka@gmail.com
  • JavaScript 작업 처리 ● JavaScript는 한번에 하나의 작업만 처리한다. ● 오래 걸리는 작업이 진행된다면 끝날 때까지 나머지 작 업은 전부 중단된다. // 주당이 따로없다. var i = 0, beerCargo = document.getElementById( “beerCargo”); while (Number.MAX_VALUE > i) { beerCargo.innerHTML += “drink ” + i + “ beer!<br/>”; i++; }
  • 이벤트 루프
  • 작업 Queue 1. 프로그램이 시작되면 이벤트 루프도 시작된다. 2. 작업이 발생할 경우 FIFO Queue 에 입력된다. 3. 이벤트 루프는 매번 작업 Queue 를 조사하고, 작업이 있다면 하나 꺼내 처 리한다. 4. 다시 이벤트 루프의 처음으로
  • 택배는 언제 받을까?
  • 택배기사에게 전화 오면.
  • 그럼, JavaScript에서 작업의 끝은 언제?
  • Callback
  • 그런데 뭐가 문제라고? ● callbackhell.com
  • 콜백의 끝없는 중첩 ● 코드 읽기가 힘들다. ● 작업과 후처리의 강한 결합 ○ 로직 처리 함수는 콜백에 대한 처리 의무까지 지게 된다. ○ 콜백이 비어있거나 다른 타입이거나 하는 예외 처리 비용.
  • 약속 주말에 저랑 데이 트 하실래요? 저 주말 출근이 언 제 끝날지 모르니 까, then 메서드에 등록해줘요. ?
  • Promise/A http://wiki.commonjs.org/wiki/Promises/A
  • Promise/A - 흐름 ● 비동기 함수를 실행하면 비동기 작업을 작업자에게 맡기고, 약속 객체를 반 환한다. ● 비동기 작업의 후처리 작업을 약속 객체에 등록한다 ● 비동기 작업이 종료되면 약속 객체는 작업 Queue 에 자신에게 등록된 작업 을 넣는다 ● Event Loop 에서는 작업 Queue를 처리하며 후처리 실행.
  • 구현체 ● jQuery Deferred Object ○ http://api.jquery.com/category/deferred-object/ ● AngularJS $q ○ https://docs.angularjs.org/api/ng/service/$q
  • jQuery Deferred Object
  • jQuery의 Ajax $.ajax({ url: "test.html", context: document.body, success: function() { $( this ).addClass( "done" ); }, error: function() { alert( "opps!!!!" ); } );
  • Deferred! var promise = $.ajax({ url: "test.html", context: document.body }); promise.done(function() { $( this ).addClass( "done" ); }); promise.fail(function() { alert( "opps!!!!" ); });
  • 약속은 기록된다. ● Promise 객체는 한번 얻고 나면 언제든 재활용할 수 있다. ○ 데이터를 얻어오고 바로 사용할 필요 없이 사용할 시점을 호출자가 정 할 수 있다. ○ 여러 작업의 결과를 변수에 담아두고 재활용이 가능하다. ○ HTML 조각, 동적 스크립트 텍스트, 공통 데이터...
  • Multi Complete ● 유저의 구매 정보를 화면에 표시해야 하는데 유저의 정보는 회원 API로, 구 매 정보는 구매 API로, 상품 정보는 상품 API 로 요청한 뒤 모든 요청이 완 료되면 서로간의 데이터를 잘 섞어서 필요 데이터를 도출하여 화면에 표시 해야 한다. ○ 그런데 각 요청이 언제 끝났는지 체크해볼까?
  • $.when var userPromise = $.get("/user"), orderPromise = $.get("/order"), productPromise = $.get("/product"); $.when(userPromise, orderPromise, productPromise) .done(function() { ... }) .fail(function() { ... });
  • 간단히 표준을 구현해본 예제 ● 코드 ○ https://github.com/javarouka/javarouka.github. com/blob/master/javascript/deferred.html ● 페이지 ○ http://javarouka.github.io/javascript/deferred.html