0

我正在玩$.when并推迟控制几个功能的流程。我需要弄清楚为什么某些东西不工作以及它应该如何编码才能工作。

这个人为示例的最终目标可以通过内联回调来实现，但这不是我正在寻找的解决方案，因为每个单独的函数都比示例更复杂。最终代码应执行以下操作：

  • 动画框 2
  • 等一下
  • 在框 2 完成后动画框 3 并且有一个短暂的暂停
  • 等一下
  • 然后在框 3 完成后为框 1 设置动画并且有一个短暂的停顿
  • 最后提醒说一切都完成后一切都完成了

我已经尝试了很多变体，但我会尝试展示那些让我最悲伤的变体。在这里找到了一个令人沮丧的小提琴

我从最简单的部分开始，在完成动画的 3 个框后提示一条消息：

var a = $('.box1').animate({top: '100px'}, 2000),
    b = $('.box2').animate({top: '100px'}, 1000),
    c = $('.box3').animate({top: '100px'}, 2000);

$.when( a, b, c )
    .done( function(){ alert( 'all done' )} );​

没问题...我实际上开始认为我知道我在做什么...不！

我接下来想，我应该能够将每个变量分离成它自己的函数......但是这使得警报首先发生，然后动画通过忽略它们的动画持续时间而突然结束！

function a(){
    $('.box1').animate({top: '100px'}, 2000);
}
function b(){
    $('.box2').animate({top: '100px'}, 1000);
}
function c(){
    $('.box3').animate({top: '100px'}, 2000);
}

a();
b();
c();
$.when( a(), b(), c() )
    .done( alert('all done') );

看起来像一个范围的东西？那么，如果我将 移动$.when到相应的函数中以调用下一个函数会怎样......再次在现实世界中发生的不仅仅是单个元素动画。

那没有用！为什么？警报再次首先弹出！嗯？然后所有框的动画速度都比指定的快到它们的最终位置：

function a(){
    a = $('.box1').animate({top: '100px'}, 2000);
    $.when( a ).done( alert( 'all boxes moved down' ) );
}
function b(){
    b = $('.box2').animate({top: '100px'}, 1000);
    $.when( b ).done( c() );
}
function c(){
    c = $('.box3').animate({top: '100px'}, 2000);
    $.when( c ).done( a() );
}

b();

通过 jsfiddle 更新 100，我处于堆栈溢出状态......但我想，让我们让它变得更简单，$.when从每个函数中删除所有函数，然后在我调用b()触发后添加一个c()......不幸的是b()，c()同时触发了！我在这里想念什么？

function a(){
    a = $('.box1').animate({top: '100px'}, 2000);
}
function b(){
    b = $('.box2').animate({top: '100px'}, 1000);
}
function c(){
    c = $('.box3').animate({top: '100px'}, 2000);
}      

$.when( b() ).done( c() );

别介意我认为我可以的事实

$.when( b() ).delay(1000).done( c() );

我正疯狂地试图理解这一点，何时，完成和延迟的东西（如果需要，我可以发布更多内容:)！）在观看了一个小时长的 jquery 开发人员演示文稿之后，我认为我可以在这种情况下实现它。 ..最后我有一个简单的任务，显然我错过了一些东西！我将不胜感激提供的任何方向/解释。

html和css

<div class='boxes'>
    <div class='box box1'></div>
    <div class='box box2'></div>
    <div class='box box3'></div>
</div>​

.box{width: 40px; height: 40px; background-color: green; position:absolute;}
.box1{left: 0px;}
.box2{left: 60px;}
.box3{left: 120px;}
4

2 回答 2

1

我想这就是你要找的？？？

http://jsfiddle.net/XEBeg/91/

从方法中取出调用done。IE。done(func) 不是 done(func())

我还用alert匿名函数包装了调用。

我应该注意，这不是我解决这个问题的方法，但我相信这至少是一种使用你的方法解决它的方法

于 2012-11-16T20:54:43.250 回答
1

当您开始将动画包装在函数中时，您需要确保该函数返回一个包含 promise 方法的对象。例如，

function a() {
    return $('.box1').animate({top: '100px'}, 2000);
}

现在你可以这样做：

$.when( a(), b(), c() ).done(function() {
    alert("all done!");
});

现在您可以拆分它来控制顺序：

// run b and wait one second, when done run c and wait 1 second, then run a
b().delay(1000).promise().done(function(){
    c().delay(1000).promise().done(a);
});

由于您一次不会处理多个承诺，因此您根本不需要$.when。

于 2012-11-16T20:55:09.770 回答