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

今年我还需要几个星期才能理解＆＃34;回调＆＃34; - 概念权利; - ）

以下是一个示例（仅适用于您的左列车）：

$(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);
});

你应该注意的事情：

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

对象方法中的Javascript回调

2 个答案: