javascript - 一个接一个的 Div 动画使用延迟对象

Question

在上一个 Div 动画完成后使用 deferred object 对 Div 进行动画处理。这个简单的方法适用于 f1 和 f2 这两个函数，但是当我引入 f3 时它失败了。

有没有更好的方法可以使用延迟对象实现此目的？

JSFiddle:https://jsfiddle.net/j0bgzjvd/

var deferred = $.Deferred();

function animationAgent(element, prevElement) {
  $(prevElement).promise().done( function () {
    return $(element).css("display", "block").animate({width:360},2000, "linear")
  });
}

function f1() {
  animationAgent("#div1"); 
} 

function f2() {
  animationAgent("#div2", "#div1"); 
} 

function f3() {
  animationAgent("#div3", "#div2"); 
}

deferred.resolve();
deferred.done( [ f1, f2, f3 ] );

div {
  width: 200px; 
  height: 200px; 
  background-color: red; 
  margin-bottom: 10px; 
  display: none;  
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

Answer 1

你会发现它更简单:

• 将 animationAgent() 变成一个简单的、返回 promise 的工作函数，它只知道它所动画的元素，而不知道它的使用顺序(即省略 prev元素),
• 安排函数 f1()、f2() 和 f3()，返回 返回给它们的 promise animationAgent().

然后您就有了构建可靠动画序列的基础。

function animationAgent(element) {
    return $(element).css("display", "block").animate({width:360}, 2000, "linear").promise();
}
function f1() {
    return animationAgent("#div1"); 
} 
function f2() {
    return animationAgent("#div2"); 
} 
function f3() {
    return animationAgent("#div3"); 
}

f1().then(f2).then(f3);

DEMO

或者，从函数引用数组中机械地构建 .then 链:

function animationAgent(element) {
    return $(element).css("display", "block").animate({width:360}, 2000, "linear").promise();
}
function f1() {
    return animationAgent("#div1"); 
} 
function f2() {
    return animationAgent("#div2"); 
} 
function f3() {
    return animationAgent("#div3"); 
}

[f1, f2, f3].reduce(function(promise, fn) {
    return promise.then(function() {
        return fn();
    });
}, $.when());

DEMO

或者，由于这三个动画是相同的，您可以通过从元素选择器数组构建 .then 链并直接调用 animationAgent() 来避免对单独函数的需要:

function animationAgent(element) {
    return $(element).css("display", "block").animate({width:360}, 2000, "linear").promise();
}

['#div1', '#div2', '#div3'].reduce(function(promise, selector) {
    return promise.then(function() {
        return animationAgent(selector);
    });
}, $.when());

DEMO