javascript - 上一个完成后无法触发下一个功能

Question

我试图通过在执行前一个函数后执行下一个函数来产生链式 react 。代码如下所示:

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 的值保存到局部变量中，然后在完整函数中使用它来调用 next 方法。这将确保为下一个方法正确设置 this。