javascript - 前の機能が完了したときに次の機能をトリガーできない

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

You can't do this type of definition:

complete: this.assetTwo 

It will call assetTwo, but it won't have the right this value. Instead, you need to do this:

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

他の完全な機能についても同じです。の値をローカル変数に保存し、thisそれを完全な関数で使用して次のメソッドを呼び出す必要があります。これによりthis、次のメソッドに対して適切に設定されていることが確認されます。

Answer 2

this は関数ごとに変化します。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

ここで説明されているように、タイトなコードを適切に使用するには、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();
        }
    }
};

テストされていない

Deferred のコツをつかめば、後戻りすることはありません。

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

このようにして、固定パラメータへの参照は簡単です。

Answer 4

thisJavaScriptコードのすべての場所ではなく、medを使用してください。