How to have a method call itself with parameters without a stack overflow

Question

The following GSAP code does not work due to the function calling itself, thus looping infinitely and filling up the stack

var electrons = document.querySelectorAll('.electron'),
    paths = document.querySelectorAll('.path'),
    startDuration = 2;
for(var i = 0; i < electrons.length; i++) {
  var myDelay = -(i * 0.5);  
  orbit(electrons[i], paths[i], myDelay);  
}
function orbit(electron, path, delay) {
  TweenLite.to(electron, startDuration, {rotationY:'-360', ease:Linear.easeNone, 
               onComplete: orbit(electron, path, delay)}, delay);
  TweenLite.to(path, startDuration, {rotationZ:'360', ease:Linear.easeNone}, 
               delay);
}

Why is the onComplete function being put into the stack before the animation is complete?

If I remove the parameters from the onComplete orbit function call it goes into the method, but gives me an error because no parameters are given

I tried running it through a separate function, such as function inBetween(1,2,3) { orbit(1,2,3); } but that method didn't work (as I expected)

The reason why I need to do this is because if I put all of the electrons on the same TweenLite they will wait for the others to finish. Since I have negative delays this is not acceptable for me

Here's a demo for you to play with if you'd like

Do you have any ideas on how to fix the situation?

Answer 1

it expect to onComplete be a function, try this:

TweenLite.to(electron, startDuration, {
        rotationY:'-360',
        ease:Linear.easeNone, 
        onComplete: function(){
            orbit(electron, path, delay);
        }
    },delay);