我正在尝试链接一些基于 jquery 延迟对象的调用。为了简单起见,我想:
- 调用返回延迟对象的异步方法
- 观察其进展
- 完成后,调用另一个方法
- 观察其进展
一开始,我写了这样的东西:
myFirstFunction()
.progress(myFirstProgressCallback)
.done(myFirstDoneCallback)
.then(mySecondFunction)
.progress(mySecondProgressCallback)
.done(mySecondDoneCallback);
但是我观察到了一些我没有预料到的事情(阅读文档后,这似乎就是它的工作方式):
- 仅当 myFirstFunction 解析其延迟对象时才调用 myFirstDoneCallback
- mySecondDoneCallback 也仅被调用一次
- 但是当 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”语句内的函数内注册进度回调?
最佳答案
这里有一个可能适合您的想法:检查回调内的上下文。
默认情况下,回调的上下文是触发操作的 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
) 时附加处理程序。
关于jquery - 链式 jQuery 延迟,即使在 then 语句之后也会调用所有进度回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24921142/