Question

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

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

animate box 2
等一下
框2完成后动画框3并且暂停了
等一下
然后在方框3完成后短暂暂停
最后警告说一切都完成后一切都已完成

我尝试了很多这方面的变化，但我会试着提出那些让我最悲伤的东西。 a frustrating fiddle found here

我从最容易的部分开始，在完成动画的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' )} );

没问题......我真的开始认为我知道自己在做什么...... NOPE！

我接下来想到，我应该能够将每个变量分成它自己各自的功能......但这使得警报首先发生，然后动画通过忽略它们的动画持续时间突然到达终点！

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 update 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() );

别介意我认为我可以

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

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

html和css

{{1}}

Answer 1

我认为这就是你要找的???

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

从done方法中取出调用。 IE浏览器。 done(func) 不 done(func())

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

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

Answer 2

当您开始在函数中包装动画时，需要确保该函数返回包含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。

$ .when和deferred控制功能流程

2 个答案: