javascript loads and runs js methods in order_javascript skills

This article mainly teaches you how to dynamically load and run javascript dynamically in javascript as well as the implementation code. For javascript If you are interested, please refer to it.

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

The browser will load the javascript file asynchronously, but it will be loaded according to QuoteThe writing order in the file is executed from top to bottom to parse javascript

Defer attribute mark

defer is defined in html4.0, This attribute allows the browser to delay the execution of the script and wait until the document is parsed before downloading and parsing them in the order they appear in the document.

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

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

Async attribute annotation

async is a new attribute in HTML5, and most of the advanced ones support this attribute.
The function of this attribute 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 above effect is, 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 written result at all.

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

Control the javascript loading and execution order

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

Listen to the node src through the onload and onreadystatechange attributes on the script node Whether the loading is complete

If successful, call the callback function success();

When we call this method, we can use the loadJS callback function to know that the current node has been loaded Complete, 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.

Related recommendations:

html, css and js file loading sequence and execution

##jquery PopupDialog uses the method of loading jsp page

Several methods of dynamically loading js_javascript skills

The above is the detailed content of javascript loads and runs js methods in order_javascript skills. For more information, please follow other related articles on the PHP Chinese website!