对象方法中的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

年我还需要几个星期来理解“回调” -concept右;-)

这里有一个例子（仅适用于你的左边列车）：

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

事情你应该看看在：

• 您需要添加回调调用（这里设置了一个param）到您的功能
• 你错过了一些“;”
• 如果你有所有的“回调地狱”查找“用”麻烦（jQuery的有一个内置的功能）或“async.js” < - 我真的很喜欢这个