jQuery 3 $.when 的进展与多个延迟

Question

在 jQuery 3（参见 issue）中，progress 上的 $.when 改变了行为。我希望在我的每个延期都得到解决时收到进度通知：

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>

代码也在codepen。当前输出：

“开始”
“完成https://httpbin.org/delay/1”
“完成https://httpbin.org/delay/2”
“全部完成”

我希望在每个完成的请求后看到progress? 输出。

当前的 jQuery API 有没有很好的方法来实现这种行为？

Answer 1

允许组件承诺通知聚合承诺：

• 不完全理性，
• 很可能是 jQuery 1 和 2 中很少使用的功能，因为它从未正常工作过。

考虑：

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');
});

在 jQuery 1 或 2 中，您可以合理地期望：

“开始”
“完成 1 https://httpbin.org/delay/1”
“进度 1”
“完成 0 https://httpbin.org/delay/2”
“进度 0”
“全部完成”

但我明白了：

“开始”
“完成 1 https://httpbin.org/delay/1”
“进度未定义”
“完成 0 https://httpbin.org/delay/2”
“进度 0”
“全部完成”

天知道undefined来自哪里。

现在尝试交换两个网址的顺序 - 我明白了：

“开始”
“完成 0 https://httpbin.org/delay/1”
“进度 0”
“完成 1 https://httpbin.org/delay/2”
“进度 0”
“全部完成”

仍然不如预期 - 现在你得到两次“进度 0”！

恕我直言，这个功能在 jQuery 3 中被删除并不奇怪。

Answer 2

你可以试试下面的代码吗：

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>

在这里，我们为ajax 添加了success 处理程序，我们通过它调用deferred.notify()，通过它调用progress