每个 Jquery 之后的触发函数

【问题标题】：trigger function after each Jquery每个 Jquery 之后的触发函数
【发布时间】：2015-11-23 05:18:48
【问题描述】：

    var delay = 0;
    var interval = 1000;
    var reload = function() {
    setTimeout(function(){
        $('.bl').each(function(i){ 
            $(this).delay(delay).animate({
                height: '150px'
            },500);
            delay += interval;
        });
    },interval);

setInterval(reload,delay);

大家好，所有的方块都出现后无法隐藏。

【问题讨论】：

这似乎有点矫枉过正...请描述您的目标最终效果（HTML 样本对于解决方案模型来说会很好）
@TrueBlueAussie 是的，我正在创建 html 横幅 :) 并且想要循环该函数，该函数本身一个一个地显示块，然后在所有块可见之后，我希望它们再次变为高度 0一次，然后函数重复。
好吧，这更有意义......很快回来

标签： jquery each settimeout setinterval

【解决方案1】：

这是一个不使用计时器的示例，仅使用从每个元素的动画队列返回的动画承诺：

 var interval = 1000;
 var reload = function () {
     var delay = 0;
     var promise;   // "Undefined" equates to an initial resolved promise
     $('.bl').css({
         height: 0
     }).each(function (i) {
         // chain promises in parallel using repeated $.when calls
         promise = $.when(promise, $(this).delay(delay).animate({
             height: '150px'
         }).promise());
         delay += interval;
     });
     // When all animation promises complete, start the process pseudo-recursively
     promise.then(reload);
 }
 reload();

JSFiddle: http://jsfiddle.net/TrueBlueAussie/rtuLzc6t/

唯一偷偷摸摸的一点是我使用promise = $.when(promise, newpromise) 并行地链接承诺。循环的最终结果是在所有动画结束时完成的单个 Promise。最后的then 使其递归。

【讨论】：