JS - 为数组循环时的setInterval

Question

我有一个数组，它填充的对象包含一个名为“move”或“turn”的属性，并指定如何在画布上为图像设置动画。 单击按钮后，我想循环遍历数组并按正确的顺序为元素设置动画，即移动对象，转动它，再移动它。

这是代码：

{{1}}

出于这个例子的目的，我必须设置直线运动路径而不是直线运动路径，而不是直线运动路径和im代码应该保持的印象，即 第一个数组元素触发if子句，第二个触发elseif子句，首先触发if子句。

然而，发生的事情是各种intervall确实重叠，这导致我的图像移出画布，同时一直旋转 - 而不是移动，然后旋转，最后再次直线移动

如何修复代码以及错误究竟是什么？

感谢，

Answer 1

问题在于您同时启动了两个/所有动画。

只有在早期动画完成后才需要某种机制来启动后续动画。我的建议是将你的for循环更改为一个函数，其中每个动画负责在动画完成时再次调用函数（增加i）。

修改

我建议的方法示例（完全未经测试）：

var animation = false;

this.executePlan = function() {
    var self = this;

    function doStep(i) {
        var move = this.moves[i];

        if (move.type == "move") {
            var path = new Path({ x: self.x, y: self.y }, { x: move.x, y: move.y });

            animation = setInterval(function() {
                console.log("move");
                ctx.clearRect(0, 0, res, res);
                self.draw();
                self.x += path.vector.x;
                self.y += path.vector.y;
                path.vector.s--;
                if (path.vector.s <= 0) {
                    clearInterval(animation);
                    if (i + 1 < this.moves.length) {
                        doStep(i + 1); // if there's more, do the next step
                    }
                }
            }, 10);
        }
        else if (move.type == "turn") {
            animation = setInterval(function() { 
                console.log("turn");                    
                if (move.a > 0){
                    self.facing++;
                    move.a--;
                }
                else {
                    self.facing--;
                    move.a++;
                }
                ctx.clearRect(0, 0, res, res);
                ctx.save();
                ctx.translate(self.x, self.y);  
                ctx.rotate(self.facing*Math.PI/180);
                ctx.drawImage(self.img, -self.size/2, -self.size/2, self.size, self.size);
                ctx.restore();
                if (move.a == 0) {
                    clearInterval(animation);
                    if (i + 1 < this.moves.length) {
                        doStep(i + 1); // if there's more, do the next step
                    }
                }
            }, 30);
        }
    }

    doStep(0); // start the first animation
}