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

Question

at the beginning of my html iam initializing variable " movieSRC " like this:

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

        });

at the end of my html i have some function for videojs .

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

I dont understand why a html part at the end will be loaded first and a one after the other at the beginning of my page as a second one. i need it opposite! i need to keep videojs script at the end of the page because with video should be loaded first and just after that a script.

conclusion: movieSRC in myPlayer.src(movieSRC) is alwas empty :(, but why?

Answer 1

It is executing in order. First a couple of variables are declared, then a function is executed, then later that part at the end executes. What you're overlooking is that the function being executed is asynchronous. And no matter how fast it runs, it's highly unlikely that it will complete before the page finishes loading.

This is asynchronous:

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

So while it's executing everything else is loading. Anything that you need to happen after it executes will need to be invoked from its .then() handler:

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

});

Or perhaps this order will make more sense overall for the plugin:

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

Answer 2

Most likely, the script at the end is being evaluated before the response returns from the cloud.getStepsForModules function above.

Also, there's a syntax error in the second script - you're missing the closing brace/paren/semicolon set.

Try putting the function that uses the result in the callback, like

<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;
        _V_("movie").ready(function() {
           var myPlayer = this;
            myPlayer.src(movieSRC);
            });

    });

Answer 3

JavaScript code does execute in the order it appears. However, there are functions that are asynchronous, which means they execute in a separate thread. Is it possible that your first function is asynchronous?

If you want to make sure that certain code is executed AFTER an asynchronous function, call that code in the asynchronous function's callback method.