javascript - 排队变量动画

Question

我正在尝试使用 .animate() 为变量设置动画，虽然变量可以正确设置动画，但排队的默认参数似乎不起作用，这意味着我的所有动画都一起播放。我想知道是否可以采取任何措施来阻止这些函数同时运行。

这是我的位置数组，每行包含我想要动画的不同数字，每行需要单独执行。

    position: [
        {x: 1400},
        {x: 2800},
        ]

当我的脚本到达此点时，它会启动此函数

function animate (varStore) {
varStore.position.forEach(function(position) {
        $({value: startingValue}).animate({value: position.x}, {
            duration: 5000,
            step: function() { 
                variableToChange = this.value;
            }
        });
});

它比上面的要复杂一些，但是为了可读性，这是我可以做的最基本的。

如何停止此 forEach 循环立即再次运行并等待上一个动画完成？

我到处寻找解决方案，但似乎找不到任何东西。

我也愿意完全改变我处理这个问题的方式，如果有任何关于如何让它真正发挥作用的建议，我将不胜感激。

Answer 1

我将在此处使用 native Javascript setTimeout:

function animate (varStore) {
varStore.position.forEach(function(position) {
    var timer = setTimeout((function(){
        $({value: startingValue}).animate({value: position.x}, {
            duration: 5000,
            step: function() { 
                variableToChange = this.value;
            }
        });
    }), 5000);
});