Multiple eventCallbacks?

[katerlouis]

jQuery-style I try to apply 2 callbacks to the same function.

I can't figure out the correct syntax and can't find anything about multiple callbacks in the docs or here in the forums.

 

Is it not possible?

 

var blub = new TimelineMax()
	.to(".stuff", 1, { x: 200 })
	.from(..
    .staggerTo(..
	.add(...
          
    // Whyyy noh possiboool?
    .eventCallback("onComplete onReverseComplete", ..
    .eventCallback("onComplete, onReverseComplete", ..
    .eventCallback(["onComplete","onReverseComplete"], ..
;

 

[Carl]

It appears you would just add separate eventCallback's for each.

.eventCallback("onComplete", myFunction)
.eventCallback("onReverseComplete", myFunction)

 

We try to keep the API as lean and lightweight as possible and tend to only add new features if:

• there is high demand / it solves a common problem many developers face in many projects
• it can't be achieved by the existing API

For this is it seems like an extra line of code or two in your JS will pretty easily accomplish what you need, so my guess is that it won't be high on the new features list. I'm not the final say in these matters, just sharing my perspective. We will certainly consider the rewards and implications further and let you know if there is more to share.

 

We definitely appreciate the suggestion, so thank you!

 

[GreenSock]

As you probably know, we place a HUGE priority on performance in GSAP, and callbacks are extremely fast. Event listeners (which is what you're describing here) take longer because you have to manage an array of them, loop through that array whenever they need to be triggered, offer ways to remove listeners, etc., etc. There's just more overhead and it's pretty simple to achieve what you're asking for with vanilla JS:

.eventCallback("onComplete", function() {
    func1();
    func2();
    func3();
});

 

Or you could easily create your own wrapper around the callback system that'll let you add as many listeners as you want:

function addListener(animation, type, func, params, scope) {
    var listeners = animation._listeners = animation._listeners || [];
    listeners.push({type:type, func:func, params:params, scope:scope});
    if (!animation._listeners[type]) {
        animation._listeners[type] = function() {
            var i = listeners.length,
                listener;
            while (--i > -1) {
                listener = listeners[i];
                if (listener.type === type) {
                    listener.func.apply(listener.scope || animation, listener.params);
                }
            }
        };
        animation.eventCallback(type, animation._listeners[type]);
    }
}

(untested)

 

That way, you can just call addListener(yourAnimation, "onComplete", yourFunc);

 

And of course you could create a removeListener() function that loops through the listeners and removes the appropriate one(s). Hopefully this gives you a nudge in the right direction

 

[katerlouis]

Yeah, obvious "workaround" is Carls solution. Disclaimer, though: I knew that myself, but as always were fishing for a "more convenient" solution.

I like anonymous functions and many years of jQuery got me used to multiple event listeners.

 

And again, as always, I learned why it is like it is and accept it

 

 

But I don't see how Jakes first code snippet would accomplish what I need– In case this really solves my problem and I just don't understand it, please explain in more detail. But maybe there's just a misunderstanding; I don't want to have multiple functions called in one event; i want the same (preferably anonymous-) function called in 2 different events.

 

 

Thanks!

[GreenSock]

No no, I was just showing how you could call multiple functions with one callback. I wasn't saying it was what you needed to do. Sorry if that was confusing. When I glanced at your first question, I thought that's what you were asking about. 

 

Have you tried naming your function? You could even do that inline:

tween.eventCallback("onComplete", function myFunction() {
   ...
}).eventCallback("onReverseComplete", myFunction);

 

Or with a little vanilla JS, you can create your own convenience function that lets you pass in a comma-delimited list and it splits it apart and calls eventCallback() for each one. 

 

If this was a feature that a lot of people requested, we'd certainly be willing to add it, but I think you're the first person to ever request this. I don't think I've ever needed functionality like this personally, and it strikes me as rather unusual to want a bunch of callback types to be handled in the same way (all pointing to a single function). That's not to say it's a bad idea at all, of course. And if more people request it, we'll definitely consider adding it. Thanks for the suggestion.