Question

以下GSAP代码由于函数调用本身而无效，因此无限循环并填满堆栈

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

为什么在动画完成之前将onComplete函数放入堆栈？

如果我从onComplete轨道函数调用中删除参数，它会进入方法，但是因为没有给出参数而给我一个错误

我尝试通过单独的函数运行它，例如function inBetween(1,2,3) { orbit(1,2,3); }，但该方法不起作用（正如我所料）

我之所以需要这样做是因为如果我将所有电子放在同一个TweenLite上，他们就会等待其他电子完成。由于我有负面延迟，这对我来说是不可接受的

Here's a demo如果您愿意，可以和你一起玩

您对如何解决问题有任何想法吗？

Answer 1

它希望onComplete成为一个函数，试试这个：

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

如何使用参数调用自身，而不会发生堆栈溢出

1 个答案: