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

Question

我对此有些困惑。我有一个几乎完全用 JavaScript 构建的 Web 应用程序。它从一个基本模板开始，然后在用户交互时开始向其中添加内容。我正在尝试使用 Greensock 作为动画库，它能够使用进度 slider 来显示动画的进度，请参阅此处的第二个框:https://greensock.com/timelinemax

问题是它使用回调 onUpdate应该在每一帧上运行该函数。然后我可以用它来制作带有动画的 slider 轨道。

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

这可以工作 - 只不过 slider 对象尚不存在。我不知道为什么，这是文件中包含的最后一些代码，但我在控制台日志中收到几个错误，只是加载页面“ReferenceError:sliderTimeline未定义”，但随后一切正常。

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

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 $( document ).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});
});