$。当和递延控制功能流程 [英] $.when and deferred to control function flow

问题描述

我在玩 $。当和递延来控制多种功能的流动。我需要的东西，为什么不工作一点点清晰，应该如何codeD的工作。

这个人为的例子的最终目标可以用内联回调达成但这不是我要找的，因为每个单独的功能比这个例子更复杂的解决方案。最后code应做到以下几点：

• 动画盒2


• 等待第二个

动画箱后3
• 2盒已完成，并出现了短暂的停顿


• 等待第二个


• 然后盒3已完成，出现了短暂的停顿后，动画BOX1


• 最后警告说样样齐全一切都完成后，

我已经尝试了很多这样的变化，但我会尽量和present引起了我最悲伤的人。 这里发现了一个令人沮丧的小提琴

我开始用最简单的片，3盒，其中完成动画后，警报消息：

  VAR一个= $动画（'BOX1。'）。（{顶：'100px的'}，2000）
    B = $（'。BOX2'）动画（{顶：'100px的'}，1000）
    C = $（'BOX3。'）动画（{顶：'100px的'}，2000）。$。当（A，B，C）
    .done（函数（）{警报（'全部完成'）}）;
 

没问题......其实，我开始思考，我知道我在做什么..没有！

我接下来想通，我应该能够将每个变量分离到它自己的相应的功能...但是，这取得了第一次警报发生，然后通过动画的无视动画持续时间突然到达了终点！

 函数（）{
    $（'。BOX1'）动画（{顶：'100px的'}，2000）;
}
函数b（）{
    $（'。BOX2'）动画（{顶：'100px的'}，1000）。
}
函数c（）{
    $（'。BOX3'）动画（{顶：'100px的'}，2000）;
}一个（）;
B（）;
C（）;
$。当（A（），B（），C（））
    .done（警报（'全部完成'））;
 

似乎是一个范围内的事情吗？那么，如果我移动 $。当进入相应的功能在现实世界中再次呼吁在网上下一个......还有很多更不仅仅是一个发生单一元素的动画。

这没有工作！到底为什么？警报弹出第一了！是吧？然后所有的方块动画速度比指定其最终位置：

 函数（）{
    A = $（'BOX1。'）动画（{顶：'100px的'}，2000）。
    $。当（一）.done（警报（'所有箱下移'））;
}
函数b（）{
    B = $（'。BOX2'）动画（{顶：'100px的'}，1000）;
    $。当（B）.done（C（））;
}
函数c（）{
    C = $（'BOX3。'）动画（{顶：'100px的'}，2000）。
    $。当（C）.done（一（））;
}B（）;
 

通过的jsfiddle更新100我在堆栈溢出......但等到我算了一下，让让它更简单，删除所有 $。当从每个功能只需添加一个我称之为后 b（）来火了 C（） ...不幸的是 b（）和 C（）同时被解雇了！缺少什么我在这里？

 函数（）{
    A = $（'BOX1。'）动画（{顶：'100px的'}，2000）。
}
函数b（）{
    B = $（'。BOX2'）动画（{顶：'100px的'}，1000）;
}
函数c（）{
    C = $（'BOX3。'）动画（{顶：'100px的'}，2000）。
}$。当（B（））.done（C（））;
 

没关系的事实，我想我可以

  $时（B（））.delay（1000）.done（C（））;
 

我试图像疯了似的明白这一点的时候，做的，延期的东西（它如果需要的话我可以发布更多的:)！）的东西，看一个小时的jQuery开发presentation后，我以为我可以实现它这种情况......最后，我有一个简单的任务，我明显缺少的东西！我想AP preciate提供的任何方向/解释。

HTML和CSS

 ＆LT; D​​IV CLASS ='盒子'＆GT;
    ＆LT; D​​IV CLASS =框BOX1'＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =框BOX2'＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =框BOX3'＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;.box的{宽度：40像素;高度：40像素;背景颜色：绿色;位置：绝对;}
.box1 {左：0像素;}
.box2 {左：60像素;}
.box3 {左：120像素;}
 

解决方案

当你开始在包装功能的动画，你需要确保该函数返回一个包含承诺方法的对象。例如，

 函数（）{
    返回$动画（{顶：'100px的'}，2000）;（'BOX1。'）。
}
 

现在你可以这样做：

  $。当（a（），B（），C（））.done（函数（）{
    警报（全部完成！）;
}）;
 

现在你可以拆分控制顺序：

  //运行b和等待一秒钟，做运行c和等待1秒时，然后运行
B（）。延迟（1000）.promise（）。完成（功能（）{
    。（℃）延迟（1000）.promise（）处理完毕（一）。
}）;
 

因为你永远不会与一个以上的承诺处理的时间，你不需要 $。当的。

I'm playing with $.when and deferred to control flow of several functions. I need a little clarity on why something isn't working and how it should be coded to work.

The end objective for this contrived example can be reached with inline callbacks but that is not the solution I'm looking for as each individual function is more complex than the example. The final code should do the following:

• animate box 2
• wait a second
• animate box 3 after box 2 has finished and there has been a brief pause
• wait a second
• then animate box1 after box 3 has finished and there has been a brief pause
• Finally alert saying everything is complete after everything is complete

I have tried many variations of this but I will try and present the ones that cause me the most grief. a frustrating fiddle found here

I began with the easiest piece, alerting a message after the 3 boxes where finished animating:

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' )} );​

no problem... I actually started to think I knew what I was doing...NOPE!

I next figured, I should be able to separate each variable into it's own respective function... but that made the alert happen first, and then the animations reached their end abruptly by ignoring their animation duration time!

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') );

Seems like a scope thing? So what if I move the $.when into the respective function to call the next one in line... again in the real world there is a lot more happening than just a single elements animation.

That didn't work! why exactly? the alert pops up first again! huh? and then all the boxes animate quicker than specified to their final positions:

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

By jsfiddle update 100 I'm on stack overflow...but wait I figured, lets make it even simpler, remove all the $.when from each function and just add one after I call b() to fire off c()... unfortunately b() and c() fired simultaneously! What am I missing here?

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

Never mind the fact that I was thinking I could

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

I'm trying like crazy to understand this when, done, and deferred stuff (which I can post more on if needed :)!) After watching an hour long jquery developer presentation on the stuff I thought I could implement it for this situation... In the end I have a simple task, and am obviously missing something! I would appreciate any direction / explanation offered.

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

解决方案

When you started wrapping your animations in functions, you need to make sure that the function returns an object that contains a promise method. for example,

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

now you can do:

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

Now you can split that to control the order:

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

Since you are never dealing with more than one promise at a time, you don't need $.when at all.

这篇关于$。当和递延控制功能流程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！