Progress on jQuery 3 $.when with multiple deferreds

Question

In jQuery 3 (see issue) it looks like progress on $.when changed behaviour. I'm looking to get a progress notification when each of my deferreds is resolved:

var urls = [
  'https://httpbin.org/delay/2',
  'https://httpbin.org/delay/1'
];
console.log('started');
var deferreds = $.map(urls, function(url) {
  var d = $.Deferred();
  $.ajax({
    url: url,
    type: 'GET'
  })
  .always(function(){
    console.log('done %o', url)
    d.notify();
    d.resolve.apply(this, arguments);
  });
  return d.promise();
});

$.when.apply(jQuery, deferreds).progress(function(){
  // Does not call
  console.log('progress?');
}).done(function(){
  console.log('all done');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Code also on codepen. Current output:

"started"
"done https://httpbin.org/delay/1"
"done https://httpbin.org/delay/2"
"all done"

I'd expect to see a progress? output after each completed request.

Is there a nice way with the current jQuery API to achieve this behaviour?

Answer 1

Could you please try with following code:

var urls = [
  'https://httpbin.org/delay/2',
  'https://httpbin.org/delay/1'
];

console.log('started');
var deferreds = $.map(urls, function(url) {
  var d = $.Deferred();
  $.ajax({
    url: url,
    type: 'GET',
    success: function(){
      d.notify(); //notify the progress handler about the current progress
    } 
  })
  .always(function(){
    console.log('done %o', url)
    d.resolve.apply(this, arguments);
  });
  return d.promise();
});

$.when.apply(jQuery, deferreds).progress(function(){
  // Does not call
  console.log('progress?');
}).done(function(){
  console.log('all done');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
</div>

Here we have added the success handler for ajax via which we are calling the deferred.notify() by which progress will get called

Answer 2

Allowing component promises to notify an aggregated promise :

• is not completely rational,
• was most probably a little used feature in jQuery 1 and 2 given that it never worked properly.

Consider:

var urls = [
    'https://httpbin.org/delay/2',
    'https://httpbin.org/delay/1'
];
console.clear();
console.log('started');
var promises = urls.map(function(url, i) {
    return $.Deferred(function(d) {
        $.ajax({
            url: url,
            type: 'GET'
        })
        .always(function() {
            console.log('done', i, url);
            d.notify(i);
            d.resolve.apply(this, arguments);
        });
    }).promise();
});

$.when.apply(null, promises).progress(function(x) {
    console.log('progress ' + x);
}).done(function() {
    console.log('all done');
});

In jQuery 1 or 2, you would reasonably expect :

"started"
"done 1 https://httpbin.org/delay/1"
"progress 1"
"done 0 https://httpbin.org/delay/2"
"progress 0"
"all done"

But I get :

"started"
"done 1 https://httpbin.org/delay/1"
"progress undefined"
"done 0 https://httpbin.org/delay/2"
"progress 0"
"all done"

Heaven only knows where that undefined came from.

Now try swapping the order of the two urls - I get :

"started"
"done 0 https://httpbin.org/delay/1"
"progress 0"
"done 1 https://httpbin.org/delay/2"
"progress 0"
"all done"

Still not as expected - now you get "progress 0" twice!

IMHO, it's no great surprise that this feature was dropped in jQuery 3.