Cosa fa this.async() in JavaScript

Question

Continuava a vedere questo modello nel codice, ma non riusciva a trovare alcun riferimento ad esso in google o SO, strano. Qualcuno può indicarmi di fare riferimento a questa funzione.async()?

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

Answer 1

è un modo per aggirare il problema della fuoriuscita this all'interno richiamata. Senza questo riferimento aggiuntivo il codice sarebbe simile a questo:

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

Sfortunatamente! this all'interno della risposta la richiamata non è la stessa di this al di fuori di essa. In realtà può essere qualsiasi cosa, a seconda di cosa $.get (chiamando il callback utilizzando) decide di essere. La maggior parte delle persone utilizza di riferimento aggiuntivo chiamato that per lo stesso scopo:

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

Questo modello sembra anche ragionevole e leggibile.

Oh, e se siete curiosi di sapere questa sintassi:

done(JST[path] = tmpl) 

Si tratta di un incarico utilizzata come espressione. Il valore di assegnazione è il lato destro, quindi questo codice è equivalente a:

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

Answer 2

var done = this.async() e done(blah) è un trucco intelligente per restituire un valore prelevato dalla chiamata asincrona (ad esempio $.get) all'interno di una funzione sincrona.

Vediamo un esempio:

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

Si tratta di una chiamata di funzione piuttosto semplice in modo che nessuno di puzzle qui. Tuttavia, cosa succede se è necessario recuperare il testo in modo asincrono nella funzione getText()?

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

chiamata a getText() non restituisce il testo che si desidera ottenere. Restituisce l'oggetto di promessa di jquery.

Quindi, come possiamo rendere getText() restituire il testo ricevuto dalla chiamata $.get()?

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

Magico, giusto?

Non conosco ancora il funzionamento interno della chiamata this.async(). Non so se c'è una libreria che fornisce quella funzione, ma puoi vedere che Backbone.LayoutManager usa questo trucco https://github.com/tbranyen/backbone.layoutmanager/blob/master/backbone.layoutmanager.js (cerca this.async).

Inoltre, Tim Branyen (l'autore di backbone layoutmanager) ne parla brevemente nel suo video tutorial (http://vimeo.com/32765088 circa 14:00 - 15:00). Nel video, Tim dice che Ben Alman ha escogitato quel trucco. Date un'occhiata anche a questo https://github.com/cowboy/javascript-sync-async-foreach

Penso che sia un trucco abbastanza accurato per mixare funzioni asincrone e sincronizzazione.

Cheers,