Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Making Promises With jQuery Deferred

No description
by

Juan del Rio

on 24 October 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Making Promises With jQuery Deferred

Pyramid of doom
Antes de jQuery 1.5
$.ajax({
url: "/ServerResource.txt",
success: successFunction,
error: errorFunction
});
Lo evitamos con:
$.get('pages/run-tool.html')
.then (function (args) {
// This works fine
alert(args);
})
.then (function() {
return $.get('pages/test.html'); // the return value creates a new Deferred object
})
.done (function(args) {
alert (args);
});
Making Promises With jQuery Deferred
¿Que son las promesas?
Una promesa es una abstracción que encapsula la ejecución de una acción asíncrona y los valores que retorna
A promise (or "future") is an object which represents the output of some computation which hasn't necessarily happened yet
En jQuery se implementa mediante el constructor / objeto deferred
Los deferred comienzan en estado pendiente, pudiendo pasar a estado resuelto o rechazado
Con las promesas:
$.ajax( "example.php" )
.done(function() { alert("success"); })
.fail(function() { alert("error"); })
.always(function() { alert("complete"); });
Promesas en ajax
Since version 1.5.1, jqXHR objects returned by $.ajax() implement a “Promise” interface.
Con "when" sincronizamos varios eventos
var test1 = $.get( "test1.php" ).done(function() {
console.log( "test1 success" );
});
var test2 = $.get( "test2.php" ).done(function() {
console.log( "test2 success" );
});
$.when( test1, test2 ).done(function () {
console.log("fin de test1 y test2");
});
Las promesas se pueden usar con animaciones de jQuery
$.when($('#pepe1').fadeOut(5000)).done(function(){
console.log("fin de 1");
});

$("#pepe2").fadeOut(7000).promise().done(function() {
console.log("fin de 2");
});

var animacion1 = $("#pepe3").fadeOut(9000);
var animacion2 = $("#pepe4").fadeOut(12000);

$.when( animacion1 ).done(function( x ) {
console.log("fin de 3");
});

$.when( animacion1, animacion2 ).done(function () {
console.log("fin de 3 y fin de 4");
});
O con elementos...
$( "#pepe4" ).promise().done(function() {
console.log("fin de pepe4_a");
});

$( "#pepe4" ).fadeOut();

$( "#pepe4" ).promise().done(function() {
console.log("fin de 4_b");
});
O añadirlo a nuestras propias funciones
function propia() {
var dfd = new $.Deferred();

$("#propia").animate({
opacity: 0
}, 15000, function() {

dfd.resolve("Finished fading out!");
});
return dfd.promise();
}

var promise = propia();

promise.done(function(message) {
console.log(message);
});
Full transcript