How to implement sequential loading and running js methods in javascript

This article mainly teaches you how to dynamically load and run js in javascript in order, as well as the implementation code. Friends who need it can refer to it.

First of all, if you don’t understand JS dynamic loading, you can refer to:

javascript dynamic loading implementation method

Three methods of dynamically loading JS files

How to avoid any asynchronous, blocking, etc. annotations on your script:

The browser will load the javascript file asynchronously, but it will parse the javascript from top to bottom in the order of writing in the referenced file

Defer attribute mark

defer is defined in html4.0. This attribute allows the browser to delay the execution of the script. After the document is parsed, it will be processed in the order in which they appear in the document. Go to download analysis.

That is to say, the script with the defer attribute is similar to placing the script in the body, and the loading effect is the same.

However, the degree of support for the defer attribute in each browser is slightly different, that is to say, there are The browser does not fully support.

Async attribute annotation

async is a new attribute in HTML5, and most advanced browsers support this attribute.
This attribute The function is to enable the script to be loaded asynchronously. That is to say, when the browser encounters a script with the async attribute, the browser loads the css asynchronously.

javascript dynamically loads js files

The principle is very simple, create a script node, assign the script attribute to the node, and then append it to the head tag of the dom.

function loadJS(url){
  var Script = document.createElement('script');
  Script.setAttribute('src', url);
  Script.setAttribute('type', 'text/javascript');
  document.body.appendChild(Script);
  return Script;
}

If we load multiple javascript files at the same time

loadJS('a.js');
loadJS('b.js');

The effect of the above is that the a.js and b.js files will be loaded asynchronously at the same time. If the b.js file is smaller than the a.js file, it is likely that b.js will be loaded and executed first, and will not be loaded and executed according to the writing result at all

So, if your b.js file depends on a.js, an error will be reported, because when b.js is interpreted and executed, a.js is still loading.

Control the javascript loading execution sequence

We make the following improvements to the code

function loadJS(url, success) {
      var domScript = document.createElement('script');
      domScript.src = url;
      success = success || function () {
          };
      domScript.onload = domScript.onreadystatechange = function () {
        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
          success();
          this.onload = this.onreadystatechange = null;
          this.parentNode.removeChild(this);
        }
      }
      document.getElementsByTagName('head')[0].appendChild(domScript);
    }

Use the onload and onreadystatechange attributes on the script node to monitor whether the node src is loaded successfully

If successful, call Callback function success();

When we call this method, we can use the loadJS callback function to know that the current node has been loaded, and then continue to load other script files in the callback function

loadJS(getUrl('a.js'), function () {
      loadJS(getUrl('b.js'), function () {
        console.log('a.js ,b.js 加载完成');
      });
});

Loading through the above method is a synchronous blocking load. The b.js file will be loaded and executed only after a.js is loaded.

If your javascript files do not have interdependencies, do not use this method.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to achieve elastic effects in JavaScript

How to implement cookie cross-domain in axios

How to implement binary tree traversal using JavaScript

The above is the detailed content of How to implement sequential loading and running js methods in javascript. For more information, please follow other related articles on the PHP Chinese website!