Código Assíncrono
JavaScript
O Ciclo de Eventos JavaScript
function maybe() {
console.log("…execute async, maybe?");
}
function proveIt() {
setTimeout(...
Callbacks
function saveStuff(stuff, cb) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://dev.jquery.com/~john/xdo...
Callback Binding
saveStuff(stuff, function (err, data) {
this.do(err || data);
}).bind(doer);
Callback Binding
var allTheCustomerThings;
$("#getCustomer").click(function (cust) {
var id = $("#cust-id").val();
getCust...
Promises
ArticleService.Save(art).then(function (art) {
alert(art);
}, function (err) {
alert(err);
});
Promises
Users.login(username, password)
.then(function () {
return usersModel.load();
})
.then(function () {
mobileApp.na...
Carregamento Assíncrono
<script async src="my.js">
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagNam...
Carregamento Assíncrono
<script async src="my.js">
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagNam...
Closures
for (var i = 0; i < coords.length; i++) {
(function(coords) {
mapquest.reverse({
key: config.mapquest.appKey,
coo...
Perguntas?
Próximos SlideShares
Carregando em…5
×

JavaScript Assíncrono

183 visualizações

Publicada em

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

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
183
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

JavaScript Assíncrono

  1. 1. Código Assíncrono JavaScript
  2. 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. 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. 4. Callback Binding saveStuff(stuff, function (err, data) { this.do(err || data); }).bind(doer);
  5. 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. 6. Promises ArticleService.Save(art).then(function (art) { alert(art); }, function (err) { alert(err); });
  7. 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. 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. 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. 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. 11. Perguntas?

×