Javascript 上一个函数完成时无法触发下一个函数

我试图通过在执行前一个函数之后执行下一个函数来产生连锁反应。代码如下所示：

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作为对象的属性。奇怪的是，在这个链中只执行assetwo函数，而不执行其他函数（assetThree）。为什么会这样？

您不能执行这种类型的定义：

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

的值保存到一个局部变量中，然后在完整函数中使用它来调用下一个方法。这将确保为下一个方法正确设置了

此

。

在javascript代码中的所有位置使用med而不是

此

此选项随每个函数的变化而变化，您可以通过

med

引用它，以获得所需的结果：

assetTwo : function(){

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

---

更新的fiddle:

对于紧凑的代码，请使用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();
        }
    }
};

未经测试

学会尊重别人，你永远不会回头

除非

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

---

这种方式对固定参数的引用非常简单。

+1-请告诉我。另一种情况是

self=this

！：）

self=this

起作用的原因是，其

this

被OP认为是其目标的父函数仍将在子函数内部保留

self

的作用域。@lesny09-this的值由调用方设置。在动画完成功能中，

此

可能设置为正在设置动画的对象。因此，在原始代码中，当完成并调用

assetTwo（）

时，

此

不会设置为对象，而是设置为正在设置动画的

#asset-1

。这将打乱动画中的下一项，因为

This.assetThree（）

不存在，因为它是错误的

This

。因为它不存在，它会停止序列。将正确的值保存到一个局部变量中并使用该变量可以保证它得到正确的

this

。当涉及范围问题时，javascript让我感到困惑。不过，感谢您澄清这一点@lesny09-请记住，

此

由调用方控制，这非常有帮助，而不是通过传递函数引用的方式。