对象方法中的Javascript回调

Question

这更像是一个问题，涉及为什么我的一个解决方案有效，另一个没有。 我对JS很新，只学了几个月，虽然我掌握了大部分基础知识，但我觉得我对最佳实践的了解不足。

我正在为信息图的顶部创建一个动画英雄形象，并在其上我使用JS创建两个在屏幕上移动的列车，一个从左到右，另一个从右到左。 我创建了以下代码：

    $(document).ready(function() {

        var anim = {
            train1: $(".train-one"),
            train2: $(".train-two"),


            moveLeft: function(percent, duration) {
                 anim.train1.animate({left: percent}, duration, "linear")
            },

            moveRight: function(percent, duration) {
                 anim.train2.animate({right: percent}, duration, "linear")
            },


            leftTrain: function() {
                anim.moveLeft("33%", 1000, anim.moveLeft)
                    anim.moveLeft("66%", 2000, anim.moveLeft)
                         anim.moveLeft("100%", 1000, anim.moveLeft)
                            anim.moveLeft("-100px", 1)
            },

            rightTrain: function() {
                 anim.moveRight("40%", 1000, anim.moveRight)
                    anim.moveRight("60%", 2000, anim.moveRight)
                        anim.moveRight("100%", 1000, anim.moveRight)
                                anim.moveRight("-100px", 1)
            },
        };

        anim.leftTrain();
        anim.rightTrain();
        setInterval(anim.leftTrain, 5000);
        setInterval(anim.rightTrain, 6000);

    });

我想知道为什么以下在我预期的时候不起作用，我创建了一个单独的方法来重置所有回调完成后的火车：

        resetLeftTrain: function(test) {
        anim.train1.css("left", "-100px ");
    },

    leftTrain: function() {
        anim.moveLeft("33%", 1000, anim.moveLeft)
            anim.moveLeft("66%", 2000, anim.moveLeft)
                anim.moveLeft("100%", 1000, anim.resetLeftTrain)
                        anim.resetLeftTrain()
    },

对不起，如果答案非常明显，我不习惯在普通JS中回调。 请随时提供有关结构等的任何其他指示。真的很感激！

干杯。

编辑：由于下面的答案我解决了问题，现在代码完美如下：

    $(document).ready(function() {

        var anim = {
            train1: $(".train-one"),
            train2: $(".train-two"),


        moveLeft: function(percent, duration, callback) {
            this.train1.animate({left: percent}, duration, "linear", callback)
        },

        moveRight: function(percent, duration, callback) {
            this.train2.animate({right: percent}, duration, "linear", callback)
        },

        resetLeftTrain: function() {
            this.train1.css("left", "-100px");
        },

        resetRightTrain: function() {
            this.train1.css("right", "-100px");
        },

        leftTrain: function() {
            var self = this;

            this.moveLeft("33%", 1000, function() {
                self.moveLeft("66%", 2000, function(){
                    self.moveLeft("100%", 1000, function(){
                        self.resetLeftTrain();
                    });
                });
            });
        },

        rightTrain: function() {
            var self = this;

            this.moveRight("40%", 1000, function() {
                self.moveRight("60%", 2000, function(){
                    self.moveRight("100%", 1000, function(){
                        self.resetRightTrain();;
                    });
                });
            });
        },
    };

    anim.leftTrain();
    anim.rightTrain();
    setInterval($.proxy(anim.leftTrain, anim), 5000);
    setInterval($.proxy(anim.rightTrain, anim), 6000);

    });

下次我可能会考虑使用Jquery .promise（）方法来避免过于丑陋的缩进。

感谢所有的帮助，希望问题及其答案对其他人有用

Answer 1

您需要为动画提供匿名回调函数。 你的缺乏或冒号给人的印象是它们是嵌套的:)

 anim.moveRight("40%", 1000, function(){
    anim.moveRight("60%", 2000, function(){
        anim.moveRight("100%", 1000, function(){
                anim.moveRight("-100px", 1);
        });
     });
 });

并使您的方法采取回调传递：

moveRight: function(percent, duration, callback) {
     anim.train2.animate({right: percent}, duration, "linear", callback);
},

最终结果是，当每个动画调用完成时，它将执行提供的代码，有效地将动画链接在一起。

Answer 2

那一年我还需要几个星期才能理解“回调” - 概念正确;-)

这是一个例子（仅适用于您的左列车）：

$(document).ready(function() {

    var anim = {

        train1: $(".train-one"),

        moveLeft: function(percent, duration, cb) {
            anim.train1.animate({left: percent}, duration, cb);
        },

        leftTrain: function() {
            anim.moveLeft("33%", 1000, function() {
                anim.moveLeft("66%", 2000, function(){
                    anim.moveLeft("100%", 1000, function(){
                        anim.moveLeft("-100px", 1);
                    });
                });
            });

        },
    };

    anim.leftTrain();
    setInterval(anim.leftTrain, 5000);
});

你应该看看的东西：

• 您需要在函数中添加回调调用（此处作为参数）
• 你错过了一些“;”
• 如果你遇到麻烦所有的“回调 - 地狱”寻找“承诺”（jQuery有一个内置函数）或“async.js”< - 我真的很喜欢