Jump to content
Search Community

Delayed call interval passing itself into paremter

icraft-websites test
Moderator Tag

Go to solution Solved by jamiejefferson,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
Share on other sites

  • Solution

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 comment
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.
×
×
  • Create New...