Calling function in a callback before defining it in javascript?

Question

I am having some trouble wrapping my head around this. I have a web application that is almost entirely built with javascript. It starts out with a basic template, then starts adding content to it as the user interacts. I am trying to use Greensock as the animation library which has the ability to use a progress slider to show how far you are in the animation, see the second box here: https://greensock.com/timelinemax

The issue is that it uses a callback onUpdate that is supposed to run that function on each frame. Then I can use it to make the slider track with the animation.

var mainTL = new TimelineLite({onUpdate:updateSlider});
function updateSlider() {
  sliderTimeline.noUiSlider.set( mainTL.progress());
}

This would work - except that the slider object doesn't exist yet. I don't know why, this is some of the last code to be included in the file, but I get a couple errors in the console log just loading the page `ReferenceError: sliderTimeline is not defined' but then everything works.

To try getting away from those errors, I tried to do it like this:

var mainTL = new TimelineLite({onUpdate:updateSlider});
$( document ).ready(function() {
    function updateSlider() {
      sliderTimeline.noUiSlider.set( mainTL.progress());
    } 
});

except now it fails because the updateSlider' function hasn't been defined, and it fails to start at all. I could put them both in a$( document ).ready(function()`, but then they become local functions / variables and the 5 other javascript files I am working with don't have access to them.

Do I have to live with the errors, or is there something I am not thinking of?

You should share the code that defines sliderTimeline. Or maybe check if onUpdate doesn't pass a parameter (such as the TimelineLite object) to it. — jcaron
– jcaron, Commented Jan 21, 2017 at 0:18
I must not be following the question. Why isn't var mainTL = new TimelineLite({onUpdate:updateSlider}); after the function? — jonmrich
– jonmrich, Commented Jan 21, 2017 at 0:24
@jonmrich, then I get an error that mainTL isn't defined from the mainTL.progress() function. @jcaron, the sliderTimeline object is just a basic noUIslider like this: refreshless.com/nouislider/slider-read-write — Alan
– Alan, Commented Jan 21, 2017 at 0:41

Steve · Accepted Answer · 2017-01-21 00:57:26Z

1

You can check whether sliderTimeline exists before trying to call it. For example change function updateSlider() to:

function updateSlider() {
  if (typeof sliderTimeline !== 'undefined') {
    sliderTimeline.noUiSlider.set( mainTL.progress());
  }
}

Or if you know that sliderTimeline is declared, but not assigned yet:

function updateSlider() {
  if (sliderTimeline) {
    sliderTimeline.noUiSlider.set( mainTL.progress());
  }
}

Note that this works because onUpdate is called frequently, so it will eventually be called when sliderTimeline is eventually defined.

Edit:
Additionally, you can assign global variables inside $( document ).ready() as long as you declare them outside of the function.

For example:

var mainTL;
var updateSlider;
$( document ).ready(function() {
    updateSlider = function () {
      sliderTimeline.noUiSlider.set( mainTL.progress());
    };
    mainTL = new TimelineLite({onUpdate: updateSlider});
});

edited Jan 21, 2017 at 0:57

answered Jan 21, 2017 at 0:50

Steve

10.9k20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alan Over a year ago

This looks like it would work, let me try it when I get back to the office :)

user2417483 · Accepted Answer · 2017-01-21 00:47:33Z

0

If you look at their codepen page http://codepen.io/GreenSock/pen/FnsqC/ they have:

var tl = new TimelineMax({delay:0.5, repeat:3, 
                          repeatDelay:2, onUpdate:updateStats,
                          onRepeat:updateReps, onComplete:restart});
function updateReps() {
  reps++;
  repeatCount.innerHTML = reps;
}

function updateStats() {
  time.innerHTML = tl.time().toFixed(2);
  totalTime.innerHTML = tl.totalTime().toFixed(2);
  progress.innerHTML = tl.progress().toFixed(2);
  totalProgress.innerHTML = tl.totalProgress().toFixed(2);
}

Meaning that you need to define the callback function of onUpdate.

answered Jan 21, 2017 at 0:47

user2417483

1 Comment

Alan Over a year ago

Right, but how can I delay the execution of that till the sliderTimeline object has been created? It already is located sequentially at the end, but for some reason the object hasn't been created when it the updateStats is defined.

Collectives™ on Stack Overflow

Calling function in a callback before defining it in javascript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related