我有下一个功能:
function clearWorkingArea() {
$('.extensionText').children('span').fadeOut(600, function() { $(this).remove() });
$('ul.texts').fadeOut(600, function() { $(this).empty() });
$('.buttonsDiv').fadeOut(600, function() { $(this).remove() });
$('.processingDiv').fadeOut(600, function() { $(this).remove() });
}
我想在此函数中的所有动画完成后才调用另一个函数。 我试过了:
$.when(clearWorkingArea()).done(function() {...});
此外:
clearWorkingArea().promise().done(function() {...});
没有运气,它仍然无法正常工作。 有没有办法,而不是回调地狱的衰落,做这样的功能行为?
答案 0 :(得分:1)
clearWorkingArea
仅启动动画,但这些动画都是异步的。
在clearWorkingArea
结束时,您的动画不太可能结束。
您必须获取每个动画的承诺,然后在所有承诺结束时使用Promise.all
触发您的代码。
根据文档,您可以使用start
类似方法的选项中的fadeOut
参数来获取承诺:
jQuery fadeOut()
希望这有帮助!
答案 1 :(得分:1)
更新:只需双重检查jquery,动画可以返回一个承诺。我最初只做了承诺,但是为了得到jquery的承诺,你做了承诺()。所以你毕竟不需要辅助功能。
以下是一个例子。
此外,如果您有多个选择器执行相同的操作,您可以组合使用。 例如。低于.two&在600毫秒时,它已经褪色了,但我已经做了一次超过1000毫秒的褪色。还添加了一个不存在的选择器,以确保仍然有效。
Promise.all(
[
$('.one').fadeOut(1000, function () {
$(this).empty(); }).promise(),
$('.two,.three').fadeOut(600, function () {
$(this).empty(); }).promise(),
$('.not-exist').fadeOut(600, function () {
$(this).empty(); }).promise()
]
).then(function () {
console.log('all done');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
Three 1000 ms
</div>
<div class="two">
One 600 ms
</div>
<div class="three">
Two 600 ms
</div>
&#13;
答案 2 :(得分:0)
我们应用这样一些简单的逻辑怎么样。
function doWorkWhenAllFinished(counter) {
if (counter == 4) {
//All fade animations have been complete.
//Good to go...
}
}
function clearWorkingArea() {
var counter = 0;
$('.extensionText').children('span').fadeOut(600, function() {
counter++;
$(this).remove();
doWorkWhenAllFinished(counter);
});
$('ul.texts').fadeOut(600, function() {
counter++;
$(this).empty();
doWorkWhenAllFinished(counter);
});
$('.buttonsDiv').fadeOut(600, function() {
counter++;
$(this).remove();
doWorkWhenAllFinished(counter);
});
$('.processingDiv').fadeOut(600, function() {
counter++;
$(this).remove();
doWorkWhenAllFinished(counter);
});
}