Unable to run next function if previous

Question

I am trying to make a chain reaction by executing the following function after completing the previous one. The code is as follows:

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

This is what my object looks like. Then I run the runAnimations function as an object property. It is strange that during this chain only the assetTwo function is executed, but not further (assetThree). Why is that?

Answer 1

You cannot execute this type of definition:

 complete: this.assetTwo 

It will call the assetTwo property, but will not have 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()} }); }, 

The same goes for other full functions. You need to store the this value in a local variable, and then use it in the full function to call the next method. This will ensure that this set correctly for the next method.

Answer 2

This changes with each function, you can reference it med instead, to get the desired result:

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

Updated script: http://jsfiddle.net/johnkoer/2KHnc/16/

Answer 3

use med instead of this in all places of your javascript code.

Answer 4

For good hard code, use the jQuery $.Deferred.pipe() chain, as described here

You should get something like this:

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

untested

Get deferral freezes and you will never look back.

If the med object is important for other reasons, it would be easier to just have runAnimations() rather than an object wrapper:

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

Thus, references to fixed parameters are simple.