Example Analysis of Loading Method of javascript asynchronous scripts with callback functions, and analysis of callback function instances

Example Analysis of Loading Method of javascript asynchronous scripts with callback functions, and analysis of callback function instances

This document describes how to load javascript asynchronous scripts with callback functions. Share it with you for your reference. The specific implementation method is as follows:

var Loader = function () { }Loader.prototype = {  require: function (scripts, callback) {    this.loadCount   = 0;    this.totalRequired = scripts.length;    this.callback    = callback;    for (var i = 0; i < scripts.length; i++) {      this.writeScript(scripts[i]);    }  },  loaded: function (evt) {    this.loadCount++;    if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();  },  writeScript: function (src) {    var self = this;    var s = document.createElement('script');    s.type = "text/javascript";    s.async = true;    s.src = src;    s.addEventListener('load', function (e) { self.loaded(e); }, false);    var head = document.getElementsByTagName('head')[0];    head.appendChild(s);  }}

Usage demonstration

var l = new Loader();l.require([  "example-script-1.js",  "example-script-2.js"],  function() {    // Callback    console.log('All Scripts Loaded');  });

I hope this article will help you design javascript programs.