How to make javascript files execute sequentially when dynamically loaded (the code is as follows)

The content of this article is about how to make javascript files execute sequentially when dynamically loaded (the code is as follows). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

When I was writing js code before, I wanted to dynamically insert a certain number of js files into html through the code. The dependencies of the files have been arranged in order. The key code is roughly as follows:

var jsFiles = ['somepath/a.js','somepath/b.js',...];
var head = document.head;
jsFiles.forEach((file) => {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = file;
    head.appendChild(script);
});

But during the execution of the code, the same error is reported very frequently, which probably means: the method in a.js referenced by b.js during execution does not exist. The error rate is very high, but it is not 100% error-free.

Through analysis, I think the reason should be this: Although I dynamically create script tags in the order defined in the array to load the corresponding js files, due to the size of the file and network and other factors, each file The order of completion is now not exactly equal to the order of requests. For example, in the above example, if the a.js file is larger and downloads slower than b.js, then when b.js is downloaded and begins execution, the variables or methods in a.js that it depends on will not be available. arrive.

The solution that comes to mind is to wait for the previous file to be loaded before loading the next file. The approximate code is as follows:

function loadJsFiles(jsFiles) {
    return new Promise((resolve, reject) => {
        var load = function(i) {
            var file = jsFiles[i];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.onload = function() {
                i++;
                if(i === jsFiles.length) {
                    resolve();
                } else {
                     load(i);
                }
            }
            script.src = file;
            head.appendChild(script);
        };
        load(0);
    });
}

The above method can also be changed to a chained Promise call or Callback nesting finally solved the problem, but there was a problem. The file changed from asynchronous loading to synchronous loading, which increased the file download time. The more files there are, the more obvious the impact will be. So the correct idea should be to load files asynchronously, but when executing a file, you need to wait until the files it depends on are loaded and executed first. For this problem, you can learn from third-party libraries such as require.js, or modules introduced in es6 The optimization function perfectly solves these problems.

The above is the detailed content of How to make javascript files execute sequentially when dynamically loaded (the code is as follows). For more information, please follow other related articles on the PHP Chinese website!