推迟jQuery.each结果
[英]Deferreds on jQuery.each result
问题描述
I'm learing deferreds, and can not work out how/why this works: 
我正在学习延期，并且无法弄清楚它的工作方式/原因：
<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>
In prarticular: why can I call promise after each? 特别是： 为什么我每次都称呼诺言？ Why it's technically possible? 为什么在技术上可行？ I've console.logged: 我console.logged：
console.log($("div").each(function (i) {}));
and I do see promise method in prototype. 我确实在原型中看到了promise方法。 But, my each function do not return any values, there's simply a : 但是，我的每个函数都不返回任何值，只是一个：
$(this).delay(1000 * i).fadeOut();
So how promise is connected to animation result? 那么如何将诺言与动画结果联系起来？ (basically each iteration's result) （基本上是每次迭代的结果）
EDIT 1: Just to make it clear, perhaps I should have written my question like this: 编辑1：为了清楚起见，也许我应该这样写我的问题：
How it's done that done method is called after all animations are finished == how promise is interconnected to animation that is executed inside the each callback function. 完成所有动画后调用done方法的方式==如何将promise与每个回调函数内部执行的动画互连。
2 个解决方案
解决方案1
4 2013-01-19 14:48:38
I've never seen each being used with promises, but only animation 我从未见过each都与承诺一起使用，而只有动画
$('div')
.animate({opacity: 0}, 1500) // animate all divs at once
.promise()
.done(function(){
console.log('all done');
});
this will animate all divs at once, then execute the callback when all divs finished animating. 这将立即为所有div设置动画，然后在所有div完成动画制作后执行回调。 the problem with animate inside a looping is that it can't be coordinated and you won't be able to control when they all finished if you don't use promises. 循环内的动画的问题在于，它无法协调，如果不使用诺言，您将无法控制它们何时完成。 If you really want to use each , you'd have to make an array of promises , then use then 如果你真的想使用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');
});
This isn't the same as doing $('div').fadeOut('slow', function(){ alert('done'); }); 这与执行$('div').fadeOut('slow', function(){ alert('done'); }); because the callback will happen for EACH element animated, while the promises deal like it was a "task" with many subtasks 因为回调将针对每个动画的EACH元素发生，而Promise的处理就像是一个包含许多子任务的“任务”
http://jsfiddle.net/LbHrQ/3/ http://jsfiddle.net/LbHrQ/3/
The best use of promises is when you want to synchronize some asynchronous operations by nature, like animations, ajax, things that use timeouts (in this case, you need to resolve() your Deferred manually) Promise的最佳用途是当您想要自然地同步一些异步操作（例如动画，ajax，使用超时的事物）（在这种情况下，您需要手动resolve() Deferred）
解决方案2
2 已采纳 2013-01-19 14:11:01
Have you tried adding the promise() method inside the block? 您是否尝试过加入promise()块内的方法？ At the moment you're only executing it after all the iteration has finished. 目前，您仅在所有迭代完成后才执行它。
$("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."); });
Your selector div actually refers to quite a few elements on your page. 选择器div实际上引用了页面上的很多元素。 As it iterates through them all, it executes a specific action to this element. 遍历所有这些元素时，它将对此元素执行特定的操作。
What you're then doing is asking jQuery to execute another action when all previous actions tied to those elements have finished. 然后，您要做的是让与这些元素相关的所有先前操作完成后，让jQuery执行另一个操作。 According to their documentation, it returns an object: 根据他们的文档，它返回一个对象：
when all actions of a certain type bound to the collection, queued or not, have finished.
So, after every fadeOut() has executed in the collection, the console.log() is activated. 因此，在集合中执行完每个 fadeOut()之后，会激活console.log() 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.