這更多的是一個問題,涉及我的解決方案之一爲什麼工作,而另一個不是。我對JS相當陌生,僅僅學習了幾個月,雖然我掌握了大部分基礎知識,但我覺得我缺乏最佳實踐的知識。對象方法中的Javascript回調
我正在爲信息圖表頂部創建一個動畫英雄圖像,並且使用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()方法,以避免過多的醜陋縮進。
感謝所有幫助,希望這個問題,它的答案是別人
NB:通過名稱_on那個object_中的方法來引用一個對象(您的'anim')通常是一個_really bad idea_。它打破封裝。 – Alnitak 2014-09-19 11:08:10
此外,你的班級應該只有(恕我直言)處理_列車,用不同的方法向左或向右移動。那麼這個類將會有兩個單獨的實例。 – Alnitak 2014-09-19 11:09:29
感謝Alnitak,從本身的方法中引用對象的正確方法是什麼? – user3586963 2014-09-19 11:42:50