推遲jQuery.each結果
[英]Deferreds on jQuery.each result
問題描述
我正在學習延期，並且無法弄清楚它的工作方式/原因：
<html>
<head>
</head>
<body>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("div").each(function (i) {
$(this).delay(1000 * i).fadeOut();
}).promise().done(function () { console.log("it's done"); });
</script>
</body>
</html>
特別是： 為什么我每次都稱呼諾言？ 為什么在技術上可行？ 我console.logged：
console.log($("div").each(function (i) {}));
我確實在原型中看到了promise方法。 但是，我的每個函數都不返回任何值，只是一個：
$(this).delay(1000 * i).fadeOut();
那么如何將諾言與動畫結果聯系起來？ （基本上是每次迭代的結果）
編輯1：為了清楚起見，也許我應該這樣寫我的問題：
完成所有動畫后調用done方法的方式==如何將promise與每個回調函數內部執行的動畫互連。
2 個解決方案
解決方案1
4 2013-01-19 14:48:38
我從未見過each都與承諾一起使用，而只有動畫
$('div')
.animate({opacity: 0}, 1500) // animate all divs at once
.promise()
.done(function(){
console.log('all done');
});
這將立即為所有div設置動畫，然后在所有div完成動畫制作后執行回調。 循環內的動畫的問題在於，它無法協調，如果不使用諾言，您將無法控制它們何時完成。 如果你真的想使用each ，你必須做出的一個數組promises ，然后用then
var promises = [];
$('div').each(function(){
var $this = $(this);
promises.push($this.fadeOut('slow').promise());
});
$.when.apply($, promises).then(function(){
console.log('all done');
});
這與執行$('div').fadeOut('slow', function(){ alert('done'); }); 因為回調將針對每個動畫的EACH元素發生，而Promise的處理就像是一個包含許多子任務的“任務”
Promise的最佳用途是當您想要自然地同步一些異步操作（例如動畫，ajax，使用超時的事物）（在這種情況下，您需要手動resolve() Deferred）
解決方案2
2 已采納 2013-01-19 14:11:01
您是否嘗試過加入promise()塊內的方法？ 目前，您僅在所有迭代完成后才執行它。
$("div").each(function (i) {
$(this).delay(1000 * i).fadeOut().promise().done(function () { console.log("This individual animation is done."); });
}).promise().done(function () { console.log("Everything is done."); });
選擇器div實際上引用了頁面上的很多元素。 遍歷所有這些元素時，它將對此元素執行特定的操作。
然后，您要做的是讓與這些元素相關的所有先前操作完成后，讓jQuery執行另一個操作。 根據他們的文檔，它返回一個對象：
當綁定到集合的某種類型的所有動作（無論是否排隊）都已完成時。
因此，在集合中執行完每個 fadeOut()之后，會激活console.log() 。
jquery.each（）-“ this” vs valueOfElement
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.