javascript - 为什么javascript函数没有一个接一个地加载？

Question

在我的html的开头我初始化变量“movieSRC”，如下所示:

<script type="text/javascript">

        var activeStep = getUrlVars();
        var movieSRC;

        cloud.getStepsForModules(activeStep.module, "UMCK").then(function(steps) {

            var calculatedStep = activeStep.step - 1;
            movieSRC = steps.steps[calculatedStep].movie;

        });

在我的html的结尾，我有一些函数 videojs .

<script type="text/javascript">
    _V_("movie").ready(function() {
        var myPlayer = this;
        myPlayer.src(movieSRC);
</script>
</html>

我不明白为什么 html 结尾部分会先加载，而一个在另一个在我的页面开头作为第二个。我需要它对面!我需要将 videojs 脚本保留在页面末尾，因为应该首先加载视频，然后加载脚本。

结论:myPlayer.src(movieSRC) 中的movieSRC 始终为空:(，但为什么呢？

Answer 1

正在按顺序执行。首先声明几个变量，然后执行一个函数，然后执行最后的部分。您忽略的是正在执行的函数是异步的。而且无论它运行得有多快，它极不可能在页面加载完成之前完成。

这是异步的:

cloud.getStepsForModules(activeStep.module, "UMCK")

所以在执行时其他所有内容都在加载。在它执行之后发生的任何事情都需要从它的 .then() 处理程序中调用:

cloud.getStepsForModules(activeStep.module, "UMCK").then(function(steps) {

    var calculatedStep = activeStep.step - 1;
    movieSRC = steps.steps[calculatedStep].movie;

    // I don't know this plugin, but find your "myPlayer" here somehow
    myPlayer.src(movieSRC);

});

或者也许这个顺序对于插件整体来说更有意义:

_V_("movie").ready(function() {
    var myPlayer = this;

    cloud.getStepsForModules(activeStep.module, "UMCK").then(function(steps) {
        var calculatedStep = activeStep.step - 1;
        movieSRC = steps.steps[calculatedStep].movie;
        myPlayer.src(movieSRC);
    });
});