以前完成時無法觸發下一個功能

Question

我試圖通過在執行前一個函數后執行下一個函數來做出連鎖反應。 代碼如下所示：

var med = {

    imgLoadTime : 2000,

    easingEffect : 'easeOutQuart',

    scrollEase : 'easeInOutQuad',

    effectDuration : 1000,

    currentPage : '',

    runAnimations : function(){
                        if(this.currentPage == '#slide5'){
                            this.initAssets();
                        }
                    },

    initAssets : function(){
                    $('#asset-1').animate(
                        {left : '50%'}, 
                        { 
                            duration: this.effectDuration, 
                            easing: this.easingEffect, 
                            complete: this.assetTwo 
                        });
                },

    assetTwo : function(){
                    console.log('two');
                    debugger;
                    $('#asset-2').animate(
                        {left : '50%'}, 
                        { 
                            duration: this.effectDuration, 
                            easing: this.easingEffect, 
                            complete: this.assetThree 
                        });
                },

    assetThree : function(){
                    console.log('three');
                    $('#asset-3').animate(
                        {left : '50%'}, 
                        {
                            duration: this.effectDuration, 
                            easing: this.easingEffect, 
                            complete: console.log('weszlo')
                        });
                }

};  

這就是我的對象的樣子。 然后我運行函數runAnimations作為對象的屬性。 奇怪的是，在這個鏈中只有assetTwo函數執行，但沒有進一步（assetThree）。 為什么這樣？

Answer 1

你不能做這種類型的定義：

complete: this.assetTwo 

它會調用assetTwo，但不會有正確的this值。 相反，你需要這樣做：

           initAssets : function(){
                var self = this;
                $('#asset-1').animate(
                    {left : '50%'}, 
                    { 
                        duration: this.effectDuration, 
                        easing: this.easingEffect, 
                        complete: function() {self.assetTwo()}
                    });
            },

其他完整功能也是如此。 您需要將this的值保存到局部變量中，然后在complete函數中使用它來調用下一個方法。 這將確保this設置正確的一個方法。

Answer 2

您的每個函數都會更改，您可以通過med引用它來獲得所需的結果：

assetTwo : function(){

                //debugger;
                $('#asset-2').animate(
                    {left : '50%'}, 
                    { 
                        duration: med.effectDuration, 
                        easing: med.easingEffect, 
                        complete: med.assetThree 
                    });
            },

更新小提琴： http ： //jsfiddle.net/johnkoer/2KHnc/16/

Answer 3

在你的javascript代碼中的所有地方使用med而不是this 。

Answer 4

對於漂亮的緊身代碼使用jQuery的$.Deferred.pipe()所描述的鏈條在這里

你應該得到這樣的東西：

var med = {
    imgLoadTime: 2000,
    currentPage: '',
    css : {left: '50%'},
    animOptions: {
        duration: 1000, 
        easing: 'easeOutQuart'
    };
    runAnimations: function() {
        if(med.currentPage == '#slide5') {
            $.Deferred(function(dfr) {
                dfr.pipe(function() {
                    return $('#asset-1').animate( med.css, med.animOptions );
                }).pipe(function() {
                    return $('#asset-2').animate( med.css, med.animOptions );
                }).pipe(function() {
                    return $('#asset-3').animate( med.css, med.animOptions );
                })
            }).resolve();
        }
    }
};

未經測試

掌握Deferreds，你永遠不會回頭。

除非med對象由於其他原因很重要，否則只有runAnimations()而不是對象包裝器會更簡單：

function runAnimations() {
    var imgLoadTime = 2000,
    currentPage = '',
    css = {left: '50%'},
    animOptions = {
        duration: 1000, 
        easing: 'easeOutQuart'
    };
    if(currentPage == '#slide5') {
            $.Deferred(function(dfr) {
                dfr.pipe(function() {
                    return $('#asset-1').animate( css, animOptions );
                }).pipe(function() {
                    return $('#asset-2').animate( css, animOptions );
                }).pipe(function() {
                    return $('#asset-3').animate( css, animOptions );
                })
            }).resolve();
    }
}

這種方式對固定參數的引用很簡單。