Delayed call interval passing itself into paremter

[icraft-websites 2 Likes (Newbie)]

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

        }

    }

}

[Rodrigo 3,567 Likes (Superhero)]

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.

[jamiejefferson 1,193 Likes (Superhero)]

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.