Apresentação sobre JavaScript Assíncrono dada em workshops sobre desenvolvimento web em 2014.

1. Código Assíncrono
JavaScript

2. O Ciclo de Eventos JavaScript
function maybe() {
console.log("…execute async, maybe?");
}
function proveIt() {
setTimeout(maybe, 0);
console.log("Hey, you just invoked me, and this is crazy…");
console.log("But I'll queue you up");
return "and you'll…";
}
proveIt();

3. Callbacks
function saveStuff(stuff, cb) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://dev.jquery.com/~john/xdomain/test.php", true);
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
cb(null, xhr.responseText);
} else {
cb(error);
}
}
};
xhr.onerror = function (err) {
cb(err);
}
xhr.send(null);
}
saveStuff(stuff, function (err, data) {
if (err !== null) {
return err;
}
return data;
});

4. Callback Binding
saveStuff(stuff, function (err, data) {
this.do(err || data);
}).bind(doer);

5. Callback Binding
var allTheCustomerThings;
$("#getCustomer").click(function (cust) {
var id = $("#cust-id").val();
getCustomer(id, function (cust) {
allTheCustomerThings = cust;
getContacts(id, function (contacts) {
allTheCustomerThings.contacts = contacts;
getOrders(id, function (orders) {
allTheCustomerThings.orders = orders;
getAccountsRecv(id, function (ar) {
allTheCustomerThings.ar = ar;
// OK - we got all the data, NOW WHAT?! :-)
});
});
});
});
});

6. Promises
ArticleService.Save(art).then(function (art) {
alert(art);
}, function (err) {
alert(err);
});

7. Promises
Users.login(username, password)
.then(function () {
return usersModel.load();
})
.then(function () {
mobileApp.navigate('views/notesView.html');
})
.then(
null, // YAY! We made it!
function (err) {
showError(err.message);
}
);

8. Carregamento Assíncrono
<script async src="my.js">
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = '//third-party.com/resource.js';
s.parentNode.insertBefore(g, s);
}(document, 'script'));

9. Carregamento Assíncrono
<script async src="my.js">
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = '//third-party.com/resource.js';
s.parentNode.insertBefore(g, s);
}(document, 'script'));

10. Closures
for (var i = 0; i < coords.length; i++) {
(function(coords) {
mapquest.reverse({
key: config.mapquest.appKey,
coordinates: {
latitude: coords.lat,
longitude: coords.lng
}
}, function(err, location) {
// do something with location and coords
});
})(coords);
}

11. Perguntas?