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