我正在学习延期,但无法弄清楚它是如何/为什么起作用的:
<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>
特别是:为什么我可以在每个之后调用 promise?为什么它在技术上是可行的? 我已经 console.logged:
console.log($("div").each(function (i) {}));
我确实在原型(prototype)中看到了 promise 方法。但是,我的每个函数都不返回任何值,只有一个:
$(this).delay(1000 * i).fadeOut();
那么 promise 如何与动画结果相关联呢? (基本上每次迭代的结果)
编辑 1:为了清楚起见,也许我应该这样写我的问题:
在所有动画完成后如何调用done 方法 == 如何将 promise 与在每个回调函数内执行的动画互连。
最佳答案
我从未见过 each
与 promises 一起使用,但只有动画
$('div')
.animate({opacity: 0}, 1500) // animate all divs at once
.promise()
.done(function(){
console.log('all done');
});
这将立即为所有 div 设置动画,然后在所有 div 完成动画后执行回调。
循环内动画的问题在于它无法协调,如果您不使用 promise ,您将无法控制它们何时全部完成。如果你真的想使用 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'); });
不同,因为会发生回调对于每个动画元素,而 promises 就像是一个包含许多子任务的“任务”
promises 的最佳用途是当你想要同步一些天生的异步操作时,比如动画、ajax、使用超时的东西(在这种情况下,你需要手动 resolve()
你的 Deferred )
关于javascript - 延迟 jQuery.each 结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14415154/