¿Qué hace this.async() en JavaScript

Question

Se mantuvo al ver este patrón en el código, pero no se pudo encontrar ninguna referencia en google o SO, extraño. ¿Alguien puede indicarme que haga referencia a la función this.async()?

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

Answer 1

Es una manera de solucionar el problema de la this escape en el interior de devolución de llamada. Sin esta referencia adicional, el código sería el siguiente:

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

Desafortunadamente! this dentro de devolución de llamada de respuesta no es lo mismo que this fuera de él. De hecho, puede ser cualquier cosa, dependiendo de qué $.get (llamando a la devolución de llamada usando) decide que es. La mayoría de las personas usan referencia adicional llamado that para el mismo propósito:

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

Este patrón también parece razonable y fácil de leer.

Ah, y si eres curioso acerca de esta sintaxis:

done(JST[path] = tmpl) 

Esta es una asignación utilizado como una expresión. El valor de asignación es el lado de la derecha, por lo que este código es equivalente a:

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

Answer 2

var done = this.async() y done(blah) es un truco inteligente para devolver un valor obtienen de llamada asincrónica (por ejemplo $.get) dentro de una función síncrona.

Veamos un ejemplo:

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

Es una llamada a una función bastante sencillo por lo que no rompecabezas aquí. Sin embargo, ¿qué ocurre si necesita recuperar el texto de forma asincrónica en la función getText()?

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

llamada a getText() no devuelve el texto que desea obtener. Devuelve el objeto de promesa de jquery.

Entonces, ¿cómo hacemos getText() devolver el texto que se obtiene de $.get() llamar?

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

Magic, right?

No sé el funcionamiento interno de la llamada this.async() todavía. No sé si hay una biblioteca que proporcione esa función, pero puede ver que Backbone.LayoutManager usa este truco https://github.com/tbranyen/backbone.layoutmanager/blob/master/backbone.layoutmanager.js (busque this.async).

Además, Tim Branyen (el autor del administrador de disposición de backbone) habla brevemente de ello en su video tutorial (http://vimeo.com/32765088 alrededor de las 14:00 - 15:00). En el video, Tim dice que a Ben Alman se le ocurrió ese truco. Eche un vistazo a esto también https://github.com/cowboy/javascript-sync-async-foreach

Creo que es un truco muy bueno para mezclar las funciones de sincronización y sincronización.

Cheers,