자바 스크립트에서 this.async()는 무엇을합니까

Question

코드에서이 패턴을 보았지만 google이나 SO, 이상한 곳에서는 찾을 수 없습니다. 누군가가 this.async() 함수에 대한 참조를 가르쳐 주시겠습니까?

var done = this.async(); 
    // ... 
    $.get(path, function(contents) { // or some other function with callback 
    // ... 
    done(JST[path] = tmpl); 
    }) 

Answer 1

그것은 콜백 내에서 탈출 this의 문제를 해결하는 방법입니다. 이 추가 참조가 없으면 코드는 다음과 같이 보입니다.

$.get(path, function(contents) { // or some other function with callback 
    //Wrong! `this` might no longer point to your object 
    this.done(JST[path] = tmpl); 
}) 

불행히도! this 내부 응답 콜백이 this 외부와 동일하지 않습니다. 실제로 그것은 무엇이든간에 $.get (콜백을 사용하여 호출)이 무엇인지에 따라 달라질 수 있습니다.

var that = this; 
// ... 
$.get(path, function(contents) { // or some other function with callback 
    // ... 
    that.async(JST[path] = tmpl); 
}) 

이 패턴은 또한 합리적이고 읽을 것 : 대부분의 사람들이 같은 목적을 위해 that라는 이름의 추가 참조를 사용합니다. 이 구문에 대한 호기심 경우

아, 그리고 :

done(JST[path] = tmpl) 

이 표현으로 사용되는 과제이다. 할당의 값은 우측이므로,이 코드는 동등하다 :

JST[path] = tmpl; 
done(tmpl); 

Answer 2

var done = this.async() 및 done(blah) 동기식 함수 내의 비동기 호출 (예컨대 $.get)로부터 페치 된 값을 반환하는 영리한 트릭이다.

는 다음의 예제를 보자 :

var getText = function() { 
    return "hello"; 
}; 
var text = getText(); 

그것은 그래서 매우 간단 함수 호출 여기에 어떤 퍼즐입니다. 그러나 getText() 함수에서 텍스트를 비동기 적으로 가져와야하는 경우에는 어떻게해야합니까?

var getText = function() { 
    return $.get('<some-url>', function(text) { 
    return text; 
    }); // ?????? 
}; 

getText()에 대한 호출은 당신이 얻을 할 텍스트를 반환하지 않습니다. jquery의 약속 객체를 반환합니다.

그럼 어떻게해야합니까? getText()은 $.get()에서 전화를받습니다.

var getText = function() { 
    var done = this.async(); 
    $.get('<some-url>', function(text) { 
    done(text); 
    }); 
}; 
var text = getText(); // you get the expected text 

마술, 맞습니까?

this.async()의 내부 작업을 아직 모릅니다. 라이브러리가 그 기능을 제공하는지 모르겠지만, Backbone.LayoutManager가이 트릭을 사용하는 것을 볼 수 있습니다 https://github.com/tbranyen/backbone.layoutmanager/blob/master/backbone.layoutmanager.js (this.async 검색).

또한 Tim Branyen (백본 레이아웃 관리자 작성자)은 비디오 자습서 (http://vimeo.com/32765088 오후 14:00 - 15:00)에서 간단히 설명합니다. 비디오에서 Tim은 Ben Alman이 그 트릭을 제안했다고 말합니다. 이것을 잘보세요 https://github.com/cowboy/javascript-sync-async-foreach

비동기 및 동기화 기능을 혼합하는 것은 매우 정교한 트릭입니다.

건배,