Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
icraft-websites

Delayed call interval passing itself into paremter

Recommended Posts

Hey there, I'm trying to create a repeating delayedCall to countdown 45 second and wish to pass itself ('this') into the parameter. But when I hit the barTimer.restart(true); call it gives me undefined error. Do I have to declare the delayed Call as an variable so that it can be passed as a parameter?

 

 function pre_baserate_loading() {
    var loadingText = ['Searching Similar Preferences.', 'Retrieving Products Purchased.', 'Examining Real-World Experiences.',                 'Eliminating Inadequate Products.', 'Retrieving Results.' , 'Codifying Results.'];
    var textLength = loadingText.length;
    var count = 1;
    var duration = 45;
    var barTimer = TweenMax.delayedCall(duration / textLength, updateLoadingBar, [count, barTimer, textLength, loadingTextr]);
}
 
function updateLoadingBar(count, timer, textLength, loadingText) {
    if (count >= textLength) {
        timer.kill();
        timer = null;
    } else {
        count++;
        if (timer) {
            timer.restart(true);
        }
    }
}
Link to post
Share on other sites

Hi,

 

What you're missing is scope. Basically you're passing a private variable to another function where there's no scope for that variable, therefore it returns an error indicating that can't use the restart method in an undefined element. This is solved by passing the variable's name as the scope for the callback:

 function pre_baserate_loading() {
    var loadingText = ['Searching Similar Preferences.', 'Retrieving Products Purchased.', 'Examining Real-World Experiences.',                 'Eliminating Inadequate Products.', 'Retrieving Results.' , 'Codifying Results.'];
    var textLength = loadingText.length;
    var count = 1;
    var duration = 45;
    var barTimer = TweenMax.delayedCall(duration / textLength, updateLoadingBar, [count, barTimer, textLength, loadingTextr], barTimer);
}
 
function updateLoadingBar(count, timer, textLength, loadingText) {
    if (count >= textLength) {
        this.kill();
        this = null;
    } else {
        count++;
        if (this) {
            this.restart(true);
        }
    }
}

Like that in the callback being executed by the delayedCall(), the variable becomes "this"

 

Check the API reference:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/delayedCall/

 

Live sample:

 

See the Pen GHEDb?editors=001 by rhernando (@rhernando) on CodePen

 

 

Rodrigo.

Link to post
Share on other sites

Actually I think the issue here is that you're trying to pass the barTimer variable into the function that creates it... You'll find that barTimer is undefined until the delayCall has been created, so it won't work that way.

See the Pen xkLji?editors=001 by jamiejefferson (@jamiejefferson) on CodePen



By default, the scope is already the tween/delayedCall so you can already just reference it with this i.e.

function pre_baserate_loading() {
    var loadingText = ['Searching Similar Preferences.', 'Retrieving Products Purchased.', 'Examining Real-World Experiences.',                 'Eliminating Inadequate Products.', 'Retrieving Results.' , 'Codifying Results.'];
    var textLength = loadingText.length;
    var count = 1;
    var duration = 45;
    var barTimer = TweenMax.delayedCall(duration / textLength, updateLoadingBar, [count, textLength, loadingTextr]);
}
 
function updateLoadingBar(count, textLength, loadingText) {
    if (count >= textLength) {
        this.kill();
        this = null;
    } else {
        count++;
        if (this) {
            this.restart(true);
        }
    }
}

Alternatively, GSAP allows you to pass a reference to the tween/delayedCall as a parameter using the string "{self}", like this:

TweenMax.delayedCall(duration / textLength, updateLoadingBar, [count, "{self}", textLength, loadingTextr]);

parameter 2 will be the tween/delayedCall as you were hoping for.

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×