Question

我正在学习延迟，并且无法弄清楚其工作原理如何/为何：

<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>

在prarticular：为什么我可以在每次之后致电诺言？为什么技术上可行呢？我是console.logged：

console.log($("div").each(function (i) {}));

我确实在原型中看到了 promise 方法。但是，我的每个函数都没有返回任何值，只有一个：

$(this).delay(1000 * i).fadeOut();

那么承诺如何与动画结果相关联？（基本上每次迭代的结果）

编辑1：为了说清楚，或许我应该写下这样的问题：

如何完成所有动画完成后调用完成方法==如何将promise与每个回调函数内执行的动画互连。

Answer 1

我从未见过each与promises一起使用，但只使用动画

$('div') 
.animate({opacity: 0}, 1500) // animate all divs at once
.promise()
.done(function(){ 
   console.log('all done');
});

这将立即为所有div设置动画，然后在所有div完成动画时执行回调。循环中动画的问题在于它无法协调，如果你不使用promises，你将无法控制它们何时全部完成。如果您真的想使用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元素进行动画处理，而承诺处理就像是一个带有许多子任务的“任务”

http://jsfiddle.net/LbHrQ/3/

Promise的最佳用途是当你想要自然地同步一些异步操作时，比如动画，ajax，使用超时的东西（在这种情况下，你需要resolve()你的Deferred手动）

Answer 2

您是否尝试在块中添加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结果

2 个答案: