jquery - 链式 jQuery 延迟，即使在 then 语句之后也会调用所有进度回调

Question

我正在尝试链接一些基于 jquery 延迟对象的调用。为了简单起见，我想:

1. 调用返回延迟对象的异步方法
2. 观察其进展
3. 完成后，调用另一个方法
4. 观察其进展

一开始，我写了这样的东西:

myFirstFunction()
  .progress(myFirstProgressCallback)
  .done(myFirstDoneCallback)
  .then(mySecondFunction)
  .progress(mySecondProgressCallback)
  .done(mySecondDoneCallback);

但是我观察到了一些我没有预料到的事情(阅读文档后，这似乎就是它的工作方式):

1. 仅当 myFirstFunction 解析其延迟对象时才调用 myFirstDoneCallback
2. mySecondDoneCallback 也仅被调用一次
3. 但是当 myFirstFunction 和 mySecondFunction 对其自己的延迟对象调用通知时，会调用 mySecondProgressCallback。

示例 you can run it in this jsbin :

function async(number){
  var def = new $.Deferred();

  setTimeout(function(){
    def.notify("Hello from " + number);
  }, 300);

  setTimeout(function(){
    def.resolve("I'm done " +number);
  }, 600);

  return def.promise();
}

async(1)
  .progress(function(msg){
    console.log("First progress: " + msg);
  })
  .done(function(msg){
    console.log("First done: " +msg);
  })
  .then(function(){
    return async(2);
  })
  .progress(function(msg){
    console.log("Second progress: " + msg);
  })
  .done(function(msg){
    console.log("Second done: " +msg);
  });

控制台结果:

"First progress: Hello from 1"
"Second progress: Hello from 1"
"First done: I'm done 1"
"Second progress: Hello from 2"
"Second done: I'm done 2"

第一 react :“到底为什么？？？？？？”

第二:“我怎样才能做我想做的事？”

我用这个代码替换了我的代码，效果很好( jsbin ):

function async(number){
  var def = new $.Deferred();

  setTimeout(function(){
    def.notify("Hello from " + number);
  }, 300);

  setTimeout(function(){
    def.resolve("I'm done " +number);
  }, 600);

  return def.promise();
}

async(1)
  .progress(function(msg){
    console.log("First progress: " + msg);
  })
  .done(function(msg){
  console.log("First done: " +msg);
})
.then(function(){
  return async(2)
    .progress(function(msg){
      console.log("Second progress: " + msg);
    })
    .done(function(msg){
      console.log("Second done: " +msg);
    });
  });

输出:

"First progress: Hello from 1"
"First done: I'm done 1"
"Second progress: Hello from 2"
"Second done: I'm done 2"

如何避免在“then”语句内的函数内注册进度回调？

Answer 1

这里有一个可能适合您的想法:检查回调内的上下文。

默认情况下，回调的上下文是触发操作的 Promise:

var async2,
    async1 = async(1);

async1
    .done(function (msg) {
        if (this === async1) {
            console.log("First done: " + msg);
        }
    })
    .fail(function (msg) {
        if (this === async1) {
            console.log("First fail: " + msg);
        }
    })
    .progress(function (msg) {
        if (this === async1) {
            console.log("First progress: " + msg);
        }
    })
    .then(function (msg) {
        async2 = async(2);
        return async2;
    })
    .done(function (msg) {
        if (this === async2) {
            console.log("Second done: " + msg);
        }
    })
    .fail(function (msg) {
        if (this === async2) {
            console.log("Second fail: " + msg);
        }
    })
    .progress(function (msg) {
        if (this === async2) {
            console.log("Second progress: " + msg);
        }
    });

我不确定这是否是比将进度回调嵌套在 then 中更好的解决方案。一个问题是这些操作可能在特定上下文中执行(使用 notifyWith 、 resolveWith 、 rejectWith )。

比您要求的更多信息

不久前我发现了同样的行为，感受到了同样的挫败感，并做出了与你相同的决定。从那时起，我对通知/进度如何工作做了更多的研究，这就是我发现的:

then返回一个新的 Promise，但它还将所有操作( resolve 、 reject 、 notify )从前一个 Promise 转发到后一个 Promise。事实上，一旦您向 Promise 链添加错误处理，您就会看到此行为扩展到 fail回调以及:

function async(number){
  var def = new $.Deferred();

  setTimeout(function(){
    def.notify("Hello from " + number);
  }, 300);

  setTimeout(function(){
    def.reject("I've failed " + number);
  }, 450);

  return def.promise();
}

async(1)
  .progress(function(msg){
    console.log("First progress: " + msg);
  })
  .fail(function(msg){
    console.log("First fail: " +msg);
  })
  .then(function(){
    return async(2);
  })
  .progress(function(msg){
    console.log("Second progress: " + msg);
  })
  .fail(function(msg){
    console.log("Second fail: " +msg);
  });

输出:

"First progress: Hello from 1"
"Second progress: Hello from 1"
"First fail: I've failed 1"
"Second fail: I've failed 1"

尽管第二个async从未被调用，所有 progress和fail回调已执行。如果您向完成处理程序提供函数以外的任何内容，则同样的情况(尽管很少)也会发生:

async(1)
  .progress(function(msg){
    console.log("First progress: " + msg);
  })
  .done(function(msg){
    console.log("First done: " +msg);
  })
  .then('foo')
  .progress(function(msg){
    console.log("Second progress: " + msg);
  })
  .done(function(msg){
    console.log("Second done: " +msg);
  });

输出:

"First progress: Hello from 1"
"Second progress: Hello from 1"
"First done: I'm done 1"
"Second done: I'm done 1"

所以我想我想说的是，您在进度回调中看到的行为与 Deferred 对象的工作方式并不不一致。

在我的调查开始时，我很乐观地认为我们也许能够通过使用 Promises/A+ 来引发我们想要的行为。款式:promise.then(doneFilter, failFilter, progressFilter) :

async(1)
    .then(function (msg) {
        console.log("First done: " + msg);
        return async(2);
    },
    null /*Failure Handler*/,
    function (msg) {
        console.log("First progress: " + msg);
    })
    .then(function (msg) {
        console.log("Second done: " + msg);
    },
    null /*Failure Handler*/,
    function (msg) {
        console.log("Second progress: " + msg);
    });

不幸的是，结果并没有更好:

"First progress: Hello from 1"
"Second progress: undefined"
"First done: I'm done 1"
"Second progress: Hello from 2"
"Second done: I'm done 2"

有趣的是，第二个进度回调的第一次执行没有提供正确的值。除了确认Q之外，我没有进一步调查这一点。 (支持进度/通知的 promise 的另一个实现)提供相同的结果。

最后，我回答了一个问题，帮助我阐明了这一切是如何运作的:

如果所有操作都转发到下一个 Promise，为什么这些转发的操作不调用嵌套进度处理程序？

progress在第一个 Promise 解决并且下一个异步任务待处理之后，处理程序被添加为回调。与done不同和fail , progress需要在执行相应操作 ( notify ) 时附加处理程序。