對象方法中的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”< - 我真的很喜歡