Arrow function in onComplete

[yannick]

Hi, how can someone use a arrow function as a onComplete handler?

 

The arrow function won't get executed in the example below.

this.gmapTl = new TimelineMax({ paused: true, onComplete: onCompleteFn })...

const onCompleteFn = () => {
   console.log(this.gmapBlurred);
   this.gmapBlurred = !this.gmapBlurred
   console.log(this.gmapBlurred);
}

 

Although this works fine.

 

this.gmapTl = new TimelineMax({ paused: true, onComplete: () => {
      console.log(this.gmapBlurred);
      this.gmapBlurred = !this.gmapBlurred
      console.log(this.gmapBlurred);
   } })...

 

 

 

[OSUblake]

Your onCompleteFn is an anonymous function, so it doesn't get hoisted like a named function. Try declaring onCompleteFn first.

 

const onCompleteFn = () => {
   console.log(this.gmapBlurred);
   this.gmapBlurred = !this.gmapBlurred
   console.log(this.gmapBlurred);
}

this.gmapTl = new TimelineMax({ paused: true, onComplete: onCompleteFn })

 

[OSUblake]

Alternate way using a named function.

 

this.gmapTl = new TimelineMax({ 
  paused: true, 
  onComplete: onCompleteFn,
  callbackScope: this
})

function onCompleteFn() {
   console.log(this.gmapBlurred);
   this.gmapBlurred = !this.gmapBlurred
   console.log(this.gmapBlurred);
}

 

[yannick]

Thanks for the answer. The first solution works great. Thanks a lot.

 

I'm using this timeline in a Vue method. In the named function this is not bound to the component. That's why I want to use the arrow function.

[OSUblake]

9 minutes ago, yannick said:

In the named function this is not bound to the component. 

 

It should be. Notice the 3rd parameter in the timeline, callbackScope. Setting it to 'this' should give it the correct scope.

 

But yeah, the first method is fine. Just pointing out the difference in case anybody else comes across this.