Một hình động Div sau một hình ảnh khác sử dụng đối tượng hoãn lại

Question

Tạo hiệu ứng Div sau khi hoạt ảnh Div trước đó đã hoàn thành bằng cách sử dụng deferred object. Phương pháp đơn giản này hoạt động với hai hàm f1 và f2, tuy nhiên khi tôi giới thiệu f3 thì không thành công.

Có cách nào tốt hơn để tôi có thể đạt được điều này bằng cách sử dụng đối tượng trì hoãn không?

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

Bạn sẽ tìm thấy nó đơn giản hơn:

• làm animationAgent() thành một chức năng lao động hứa hẹn-trở về đơn giản mà chỉ biết về các yếu tố đó làm sinh động và không có gì về chuỗi được sử dụng (ví dụ: bỏ qua prevElement),
• sắp xếp các chức năng f1(), f2() và f3(), để trả lại lời hứa trả lại cho họ bằng animationAgent().

Sau đó, bạn có cơ sở để xây dựng chuỗi hoạt ảnh đáng tin cậy.

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

Ngoài ra, xây dựng chuỗi .Sau đó mechanistically từ một loạt các tài liệu tham khảo chức năng:

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

Hoặc, như ba animations đang ở giống hệt nhau, y ou có thể tránh được sự cần thiết cho các chức năng cá nhân bằng cách xây dựng các chuỗi .Sau đó từ một mảng bộ chọn thành phần và gọi animationAgent() trực tiếp:

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

Answer 2

Bao giờ nghĩ về việc sử dụng callbacks trong hàm hoạt hình?

Dưới đây là một ví dụ với fadeOut: https://jsfiddle.net/0r7e2wco/

fadeOutInTurn([ 
    $("#div1"), 
    $("#div2"), 
    $("#div3"), 
    $("#div4"), 
]); 

//Fades out elements one after another 
function fadeOutInTurn(elements) { 
    var x = 0; 
    function animate() { 
     $(elements[x]).fadeOut(3000, function() { 
      if(x < elements.length - 1) { 
       x++; 
       animate(); 
      } 
     }); 
    } 
    animate(); 
} 

Answer 3

không chắc chắn nhưng tôi nghĩ rằng đây là những gì bạn muốn.

dụ fiddle

Tôi nghĩ rằng bạn đang hy vọng sẽ thực hiện deferred.done()f1, f2, f3 một sau khi khác cũng nó mà làm việc. nhưng nó không chờ đợi các hoạt ảnh được gọi bên trong các hàm này để kết thúc trước khi gọi hàm tiếp theo.

thử ghi nhật ký các cuộc gọi chức năng trên bảng điều khiển bằng cách sử dụng console.log() và bạn sẽ biết.

đây là cập nhật mã javascript -

var deferred = $.Deferred(); 
var lock = 1; 

function animationAgent(element, id, prevElement) { 
    var interval; 
    var flag = 0; 
    if (id != lock) { 
    interval = setInterval(function() { 
     if (id == lock) { 
     clearInterval(interval); 
     animationAgent(element, id, prevElement); 
     } 
    }, 1000); 
    }else{ 
    $(prevElement).promise().done(function() { 
     lock++; 
     return $(element).css("display", "block").animate({ 
     width: 360 
     }, 2000, "linear"); 
    }); 
    } 
} 

function f1() { 
    return animationAgent("#div1", 1); 
} 

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

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

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