$。當和遞延控制功能流程

Question

我玩$.when和遞延控制的幾個功能流程。我需要澄清一下爲什麼有些東西不能正常工作以及應該如何編碼才能正常工作。

這個人爲的例子最終目標可以用內聯回調達到，但不是我要找的是每個獨立的功能比這個例子更復雜的解決方案。最後的代碼應做到以下幾點：

• 動畫盒2
• 等待第二
• 動畫盒3盒2結束後出現了短暫的停頓
• 等待第二
• 然後在box 3結束後生成box1並暫停了短暫的暫停
• 最後提醒說，一切完成後，一切都完成了

我已經嘗試了很多這樣的變化，但我會盡力，並提交引起了我最悲傷的人。 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')});​ 

沒有問題......其實我開始思考，我知道我在做什麼...不是！

我接下來想到的是，我應該能夠將每個變量分成它自己的各自功能......但是這使得警報首先發生，然後動畫忽略了它們的動畫持續時間而突然結束了！

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

Answer 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。

Answer 2

我認爲這是你在找什麼???

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

採取電話出done方法。 IE瀏覽器。 done(func)不done(func())

我還包裹alert調用一個匿名函數。

我要指出，這不是我會去解決這個問題的方法，但我相信這是至少使用你的方法