javascript - 等待循环中的每个动画完成后再运行下一个动画

Question

我希望在向上计数函数上运行延迟，因此每当计数器的完成类名称完成时，只要前一个完成等，它就会运行向上计数。

$('.counter').each(function() {
    var $this = $(this),
        countTo = $this.attr('data-count');

    $({ countNum: $this.text()}).animate({
        countNum: countTo
    },
    {
        duration: 4000,
        easing:'linear',
        step: function() {
            $this.text(Math.floor(this.countNum));
        },
        complete: function() {
            $this.text(this.countNum);
        }
    });  
});

Answer 1

这不适用于 each 循环。您必须使用 complete 回调并自行完成，因为动画是异步的。

我会使用递归、自执行函数。很简单，完成后开始下一个。

var elements = $('.counter');
var current = 0;

(function next() {
    var $this = elements.eq(current),
        countTo = $this.attr('data-count');

    $({countNum: $this.text()}).animate({countNum: countTo}, {
        duration: 4000,
        easing: 'linear',
        step: function() {
            $this.text(Math.floor(this.countNum));
        },
        complete: function() {
            $this.text(this.countNum);

            if( (++current) < elements.length ) {
                next();
            }
        }
    });  
})();