Deferreds on jQuery.each result
Question
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.log($("div").each(function (i) {}));
and I do see promise method in prototype. 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:
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.
2 answers
solution1
4 2013-01-19 14:48:38
I've never seen each being used with promises, but only animation
$('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. 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
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'); }); because the callback will happen for EACH element animated, while the promises deal like it was a "task" with many subtasks
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)
solution2
2 ACCPTED 2013-01-19 14:11:01
Have you tried adding the promise() method inside the block? 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. 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. 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.