javascript - 推迟行动直到 .each() 完成

Question

我有以下方法:

function animatePortfolio(fadeElement) {
    fadeElement.children('article').each(function(index) {
        $(this).delay(1000*index).fadeIn(900);
    });
}

我想推迟一个 Action ，直到 .each() 完全完成。假设这是我需要使用的某个版本的延迟/ promise ，但不了解它在这种情况下的工作方式。

Answer 1

可以使用动画返回的promise对象

function animatePortfolio(fadeElement) {
  fadeElement.children('article').each(function(index) {
    $(this).delay(1000 * index).fadeIn(900);
  }).promise().done(function() {
    fadeElement.css('color', 'red')
  });
}


animatePortfolio($('div'))

article {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</div>