Question

我在缠绕这个问题时遇到了一些麻烦。我有一个几乎完全用javascript构建的Web应用程序。它从一个基本模板开始，然后在用户交互时开始向其添加内容。我正在尝试使用Greensock作为动画库，它能够使用进度滑块来显示您在动画中的位置，请参阅此处的第二个框：https://greensock.com/timelinemax

问题是它使用了一个回调onUpdate，它应该在每个帧上运行该函数。然后我可以用它来制作带动画的滑块轨迹。

var mainTL = new TimelineLite({onUpdate:updateSlider});
function updateSlider() {
  sliderTimeline.noUiSlider.set( mainTL.progress());
}

这可行 - 除了滑块对象尚未存在。我不知道为什么，这是要包含在文件中的最后一些代码，但是我在控制台日志中遇到了一些错误，只是加载页面`ReferenceError：sliderTimeline未定义＆＃39;但随后一切正常。

为了尝试摆脱这些错误，我尝试这样做：

var mainTL = new TimelineLite({onUpdate:updateSlider});
$( document ).ready(function() {
    function updateSlider() {
      sliderTimeline.noUiSlider.set( mainTL.progress());
    } 
});

除了现在它失败了因为updateSlider' function hasn't been defined, and it fails to start at all. I could put them both in a $（文件）.ready（function（）`，但它们变成了本地函数/变量以及我正在使用的其他5个javascript文件没有访问它们。

我是否必须忍受这些错误，或者我有没有想到的东西？

Answer 1

您可以在尝试调用之前检查sliderTimeline是否存在。例如，将function updateSlider()更改为：

function updateSlider() {
  if (typeof sliderTimeline !== 'undefined') {
    sliderTimeline.noUiSlider.set( mainTL.progress());
  }
}

或者，如果您知道sliderTimeline已声明但尚未分配：

function updateSlider() {
  if (sliderTimeline) {
    sliderTimeline.noUiSlider.set( mainTL.progress());
  }
}

请注意，这是因为onUpdate经常被调用，因此最终会在最终定义sliderTimeline时调用它。

修改
此外，只要在函数外声明它们，就可以在$( document ).ready()内分配全局变量。

例如：

var mainTL; var updateSlider; $( document ).ready(function() { updateSlider = function () { sliderTimeline.noUiSlider.set( mainTL.progress()); }; mainTL = new TimelineLite({onUpdate: updateSlider}); });

Answer 2

如果您查看他们的代码页页面http://codepen.io/GreenSock/pen/FnsqC/，他们会：

var tl = new TimelineMax({delay:0.5, repeat:3, 
                          repeatDelay:2, onUpdate:updateStats,
                          onRepeat:updateReps, onComplete:restart});
function updateReps() {
  reps++;
  repeatCount.innerHTML = reps;
}

function updateStats() {
  time.innerHTML = tl.time().toFixed(2);
  totalTime.innerHTML = tl.totalTime().toFixed(2);
  progress.innerHTML = tl.progress().toFixed(2);
  totalProgress.innerHTML = tl.totalProgress().toFixed(2);
}

这意味着您需要定义onUpdate的回调函数。

在javascript中定义之前在回调中调用函数？

2 个答案: