On gists

Deferrers examples

jQuery

short-chaining.js Raw #

var deferred = $.Deferred();

deferred.then(function(value) {
    alert(value);
    return 42;
}).then(function(id){
    alert('The answer : ' + id);
});

console.log(deferred)
deferred.resolve("hello world");




var deferred = $.Deferred();
deferred.done(function(value) {
    alert(value[0]);
}).done(function(value){
    alert(value[1]);
});

deferred.resolve(["hello world", "goodbye, cruel world"]);

Multiple AJAX calls.js Raw #

2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getData1 (){   
   return $.get('/page1.php');
}
function getData2 (){   
   return $.get('/page2.php');
}
function getData3 (){   
   return $.get('/page3.php');
}
 
$.when(getData1(),getData2(),getData3()).done(function(r1,r2,r3){
   console.log(r1) //[data, status, xhrObj]
   console.log(r2) //[data, status, xhrObj]
   console.log(r3) //[data, status, xhrObj]
})

Multiple Dynamic AJAX calls.js Raw #

1
2
3
4
5
6
7
8
9
var requests = [ //this will be the dynamic part
  $.get('page1.php'),
  $.get('page2.php'),
  $.get('page3.php')
]
 
$.when.apply($,requests).done(function(){
  console.log(arguments); //array of responses [0][data, status, xhrObj],[1][data, status, xhrObj]...
})

long sequence chaining.js Raw #

// BAD
 username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});



// GOOD
var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories')
  .then(function(repositories) {
    return repositories[0].name;
  })
  .then(function(lastUpdatedRepository) {
    return $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files');
  })
  .then(function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    return README;
  })
  .then(function(README) {
    return $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content');
  })
  .then(function(content) {
    console.log(content);
  });

small-animations.js Raw #

var p1 = $('.items, .boxes').hide(2000).promise();
var p2 = $('.sliders').slideUp(2500).promise();
var p3 = $('.openers').slideDown(1500).promise();
$.when(p1, p2, p3).then(function() {
    // all are done here
});

chaining-if-i-need.js Raw #

var d = $.Deferred();
var promise = d.resolve('abc');

promise.done(function (x) { // Suppose promise returns "abc"
    console.log(x);
    return 123;
}).done(function (x){
    console.log(x);
  // return is omitted
}).done(function (x){
    console.log(x)
})

/*
abc
123
undefined
*/

different-done-then-jQ-30.js Raw #

// BC BREAK JQ 3.0!!!

let d = $.Deferred();
d.done(() => console.log('a'));
d.resolve();
console.log('b');

// a b


var d = $.Deferred();
d.then(() => console.log('a2'));
d.resolve();
console.log('b2');

// b2 a2